JavaScript：给动态元素绑定事件

JavaScript给动态添加的元素绑定事件有几种方式：

方法一：jQuery

使用jQuery.fn.on可以很简单为动态元素绑定事件：

$(staticAncestors).on(eventName, dynamicChild, function() {});

• staticAncestors：静态的祖先元素选择器
• eventName：事件名，如click等
• dynamicChild：动态元素的选择器

on的第三个参数为eventHandler事件处理函数。

如：

<div class="buttons">
    <!-- 动态添加的<button> -->
</div>

$('.buttons').on('click', 'button', function(){
    // 处理代码
});

方法二：addEventListener

我们可以使用原生的JavaScript的addEventListener

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'btn')) {
     //处理代码   
    }
}, false);

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

addEventListener有三个参数：

• 第一个是事件名称，事件不带"on"
• 第二个是事件处理句柄函数
• 第三个参数为布尔值，表示该事件的响应顺序(useCapture)，userCapture若为true,则浏览器采用捕获, 若为false则采用冒泡方式。