发布于 2年前

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则采用冒泡方式。
©2020 edoou.com   京ICP备16001874号-3