事件绑定:
三种:1、<div onclick="xxx();"></div> xxx function(){ } //直接在DOM元素上绑定
2、var btn = document.getElementById("xxx"); //
btn.onclick = function(){ }
3、 var btn = document.getElementById("xxx"); //事件监听
btn.addEventListener(event, function, useCapture) //](https://link.juejin.im/?target=http%3A%2F%2Fwww.runoob.com%2Fjsref%2Fdom-obj-event.html)。
event : (必需)事件名,支持所有[DOM事件
function:(必需)指定要事件触发时执行的函数。
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。
传统事件绑定:
btn.onclick = function(){ alert("不执行" } //不执行
btn.onclick = function(){ alert("执行" } //执行这个
btn.addEventListener(event, function(){
alert("执行") //执行
}, useCapture)
btn.addEventListener(event, function(){
alert("也执行") //也执行
}, useCapture)
事件监听的优点:同一个元素上可以绑定多个事件安,不会覆盖。可以解除相应的绑定
事件委托:js高级书第402页
事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。
优点:1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用
2、2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。