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 ninja”书中的这张精彩图片：

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

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