javascript - 为什么事件处理程序不适用于在 javascript 中的其他函数上创建的元素

Question

这是我的代码，请问为什么 onclick 事件对作为输入的 ini 元素不起作用。

JavaScript:

window.onload = function() {
    var img = document.getElementsByTagName('img');
    var div = document.createElement("div");
    img[0].onclick = function(event) {
        document.body.appendChild(div);
        var sion = document.getElementsByTagName('div');
        var val = document.defaultView.getComputedStyle(sion[0], null);
        var mouseX = event.clientX;
        var mouseY = event.clientY;
        document.styleSheets[0].cssRules[0].style.top = (mouseY - 20) + "px";
        document.styleSheets[0].cssRules[0].style.left = (mouseX - 20) + "px";
        var ini = document.createElement("input");
        document.body.appendChild(ini);
        var hoftag = document.styleSheets[0].cssRules[0].style.height;
        var result = hoftag.replace("px", "");
        result = parseInt(result);

        document.styleSheets[0].cssRules[1].style.top = (event.clientY - 20 + result) + "px";
        document.styleSheets[0].cssRules[1].style.left = (event.clientX - 40) + "px";
    };
    ini.onclick = function(event) {
        alert("hi");
    };
};

HTML:

<img src="jlin.jpg" id="image">

Answer 1

问题在于变量的范围。变量 ini 仅存在于 img[0].onclick = function(event) { 中。请引用《JS 忍者》一书中的这张精彩图片:

要修复您的代码，请尝试:

img[0].onclick = function(event){
    ...
    var ini = document.createElement("input"); 
    document.body.appendChild(ini);
    ini.onclick = function(event){
        alert("hi");
    };
    ...
};