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则采用冒泡方式。

版权声明:著作权归作者所有。

相关推荐

C#给文档注释添加换行

错误用法:使用<br />/// 第一行 /// <br /> /// 第二行 显示出来没有效果。正确做法:使用<para>/// <summary> /// <para>第一行</para> /// <para>第二行</par

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

JavaScript删除数组里重复的元素

JavaScript里有多种方法可以用来对数组元素去重。ES6 SetES6提供了一个Set对象,用它可以很简单便可以对数组元素去重。function uniq(arr) {    return Array.from(new Set(arr)); } filter另外也可以通过filter来对数组元素去重。functi

JavaScript监控元素外的点击事件隐藏元素

监控document的点击事件,使用jquery的closet排除指定元素以及其子元素的点击事件。function hideOnClickOutside(selector) {   $(document).on('click',function(event){     if (!$(event.target)