JS为动态生成的元素绑定事件

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()，所以事件不会继续冒泡，事件流停止。