Javascript 动态事件处理，而不是 Jquery答案

【问题标题】：Javascript Dynamic Event Handling, Not JqueryJavascript 动态事件处理，而不是 Jquery
【发布时间】：2012-03-10 19:45:31
【问题描述】：

这是我的代码

<html>
    <head>
    <script type="text/javascript">
    window.onload = function(){
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'))"/>

    </body>
</html>

“onclick”事件适用于静态标签“Select”，但不适用于动态创建的“Select”。换句话说，我想知道 Javascript 中 JQuery 的 .live 的替代方法。

【问题讨论】：

标签： javascript jquery dynamic event-handling

【解决方案1】：

将事件绑定到 DOM 中已经存在的父元素：

document.body.addEventListener('click', function (e) {
  if (e.target.tagName.toLowerCase() == 'select') {
    alert('You clicked a select!');
  }
});

JS Fiddle demo.

将点击绑定到“更接近”form 的元素会稍微更明智一些，如果你使用getElementById() 而不是getElementByTagName() 它更简单，因为你不必担心您要绑定的号码的索引。

【讨论】：

【解决方案2】：

jQuery 的 live 函数通过使用“Event Delegation”来工作。基本思想是在父元素上绑定一个监听器，保证在页面加载时存在。低于它的任何元素 (with the exception of some) 都会触发一个事件，该事件可以被父侦听器捕获。从那里您需要检索事件的目标/源元素并确定它是否是您关心的。

这样的东西可以用来收听点击。只需确保您添加的任何新元素都位于正确的父容器中，并且具有将它们与其他可点击元素区分开来的属性。

<html>
<head>
    <script type="text/javascript">
        window.onload = function(){
            // get the relevant container
            var eventContainer = document.getElementById("EventContainer");

            // bind a click listener to that container
            eventContainer.onclick = function(e){

                // get the event
                e = e || window.event;

                // get the target
                var target = e.target || e.srcElement;

                // should we listen to the click on this element?
                if(target.getAttribute("rel") == 'click-listen')
                {
                    alert("You clicked something you are listening to!");
                }// if
            };
        };
    </script>
</head>
<body>
<div id="EventContainer">
    <input type="button" rel="click-listen" name="myButton" value="Listening to this button." />
    <input type="button" name="anotherButton" value="Not listening." />
    <p>I'm also listening to this a element: <a href="#" rel="click-listen">listening to this</a></p>
</div>
</body>
</html>

【讨论】：

你能解释一下这行 e = e || window.event 是什么||意思是这里
这称为短路评估。 en.wikipedia.org/wiki/Short-circuit_evaluation || 是一个“逻辑或”。它返回第一个真值或最后一个值。 developer.mozilla.org/en/JavaScript/Reference/Operators/…

【解决方案3】：

每次添加一个选择时，无需将 onclick 处理程序绑定到每个选择。

我不会重新输入你的整个页面，但你会通过阅读以下 sn-ps 来了解发生了什么：

function handler() {
    alert('You clicked a select!');
}

window.onload = function(){
    sel = document.getElementsByTagName('select');
    for(int i= 0; i < sel.length; i++) {
        sel[i].onclick = handler;
    }
}

function addSelect() {
    var slt = document.createElement("select");
    document.getElementById('ss').appendChild(slt);
    slt.onclick = handler;
}

<input type="button" onclick="addSelect();"/>

【讨论】：

【解决方案4】：

您只在窗口加载时设置 onclick。您需要做的就是将当前在 window.onload 中的代码放入一个命名函数中，然后在每次添加新选择时调用它。

这是一种愚蠢的做法：

<html>
    <head>
    <script type="text/javascript">

    function update () {
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    window.onload = update;

    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'));update();"/>

    </body>
</html>

【讨论】：

【解决方案5】：

您可以使用如下所示的跨浏览器解决方案来动态添加事件处理程序

sel = document.getElementsByTagName('select');
for( i=0; i<sel.length; i++){
    if (sel[i].addEventListener){
        sel[i].addEventListener("click", clickHandler, false);
    } else if (sel[i].attachEvent){
        sel[i].attachEvent("onclick", clickHandler);
    }else{
        sel[i].onclick = clickHandler;
    }
}

function clickHandler(event){

}

【讨论】：

用 sel[i] 替换 sel ，即使在此之后，它也不适用于动态创建的元素，但可以帮助我了解有关跨浏览器脚本的新知识 :-) 谢谢