JS为动态生成的元素绑定事件
标签: Jquery, addEventListner, removeEventListener, onclick
如果页面要通过 ajax 接入数据,那么很多页面元素可能都是等到数据进来后才通过 JavaScript 生成的。如果我们要给生成的元素绑定 click
blur
focus
等事件,那么因为 ajax 异步传输的特性,可能数据还没有获取到,我们要绑定事件的元素还没有生成,但是我们已经率先执行了绑定事件的代码,那么当后期元素生成的时候,并没有绑定对应的事件。
所以要注意这一点,就是在绑定事件的代码执行时,被绑定的元素存在于页面上吗?如果是动态生成的,可以通过在生成的过程中通过行内绑定事件来实现;还有一种做法是借助jQuery
$(selector).on(event,childSelector,[data],function,[map])
接下来了解一下事件绑定的三种类型:行内绑定,属性绑定,方法绑定。
行内绑定:
<div width="30" height="30" onclick="myFun"></div>
function myFun(){//to do}
属性绑定,这是我最常用的:
<div width="30" height="30" id="btn"></div>
$("#btn").click(function(){//to do})
方法绑定,元素在绑定该事件时即执行一次函数。
<div width="30" height="30" id="btn"></div>
document.getElementById("btn").addEventListener(type, myFun, false);
或者
document.getElementById("btn").attachEvent("on" + type, myFun);
function myFun(){//to do}
有事件绑定就有事件解锁:
dom.onclick = null; //对于 Bind in HTML 和 dom.onclick 绑定的事件都可以用 dom.onclick = null 来解绑事件。
removeEventListener(type, myFun, false); //useCapture 的值应该一致
detachEvent("on" + type, myFun); //IE9 以下版本
接下来讲一下事件捕获和事件冒泡,以及如何阻止事件冒泡。事件捕获和事件冒泡的顺序如图所示:
事件冒泡:事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。
事件捕获:不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
<div id="wrap">
<div id="btn">CLICK ME</div>
</div>
$("#wrap").addEventListener('click', myFun1);
$("#btn").addEventListener('click', myFun2);
function myFun1(event) {
console.log(111);
}
function myFun1(event) {
event.stopPropagation();
console.log(222);
}
上面的输出结果是 222,因为 addEventListener 的 useCapture 默认值是 false(冒泡), 点击 btn
时,首先执行冒泡事件,再执行捕获事件,但是在冒泡事件我们使用 event.stopPropagation(),所以事件不会继续冒泡,事件流停止。