如果我有这样的功能:
document.someElement.click = function(){alert(555);}
并且我在 HTML 页面本身的元素 someElement
中没有,所以在我将 someElement
添加到页面之后,但是之前的代码不起作用.
向(新)动态添加的 HTML 元素添加事件监听器的最佳方式是什么?
最佳答案
这里有两种常见的策略。
将元素添加到 DOM 后,挂接元素上的事件。
使用事件委托(delegate)。
第一个相当简单,所以我将重点介绍第二个:
事件委托(delegate)的想法是,大多数 DOM 事件从它们发生的元素“冒泡”到文档,您可以在任何级别处理它们。
例如,假设你有
<div id="container">
</div>
您可以在容器 div 上 Hook click
事件,然后如果您这样做:
var span = document.createElement('span');
span.innerHTML = "Hi there";
document.getElementById("container").appendChild(span);
...然后,当您单击 span
时,事件将冒泡到容器,您会在容器的 click
处理程序中看到单击。
您可以通过使用 event
对象的 target
属性来判断哪个元素启动了事件。
这是一个例子:
HTML:
<button id="theButton">Click To Add</button>
<div id="container"></div>
JavaScript:
// Note that this code is at the end of the document
(function() {
var container = document.getElementById("container");
// Hook clicks on the button
document.getElementById("theButton").onclick = buttonClick;
// Hook clicks on the container
container.onclick = containerClick;
// Handle button clicks
function buttonClick() {
var child = document.createElement('div');
child.id = ('d' + container.childNodes.length) +
Math.floor(Math.random() * 10000);
child.innerHTML = "I'm child div '" + child.id + "'";
container.appendChild(child);
}
// Handle container clicks
function containerClick(event) {
event = event || window.event;
alert("You clicked child '" + event.target.id + "'");
}
})();
注意:为了简单起见,我使用了 onclick
。在生产中,我建议使用 addEventListener
(或在 IE 上使用 attachEvent
)。事实上,我通常建议使用像 jQuery 这样的好库。 , YUI , Closure , 或 any of several others因为它们提供的重要实用功能(包括平滑 addEventListener
/attachEvent
东西)。
关于javascript - 如何将事件附加到新添加的 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14001098/