语法：node.addEventListener(事件名称,回调函数,是否使用事件捕获传递)
注意：使用匿名的回调函数后面会无法移除
<script> var ul = document.querySelector('#ul') ul.addEventListener('click',function(){ console.log('点击了ul') }) </script>
第三个参数：
这个参数用来描述是否使用事件捕获传递，默认为false
事件传递方式就两种，一种是冒泡（完全由内到外），另一种是捕获（由外到内），即默认为冒泡传递
实例：3个dom元素都绑定了点击事件
<ul id="ul" onclick="test('ul')"> <li id="li"> <p onclick="test('p')">11111</p> </li> </ul>
<script> function test(msg){ console.log(msg) } var li = document.querySelector('#li') li.addEventListener('click',function(){ console.log('点击了li') },false) // 默认false 冒泡传递 </script>
此时点击li标签，控制台依次打印
p 点击了li ul
这个例子先触发了最内层的p元素的点击事件，接着才是li元素，最后才是ul元素，也就是从内到外传递，即冒泡传递
但是如果修改为 捕获传递
<script> function test(msg){ console.log(msg) } var li = document.querySelector('#li') li.addEventListener('click',function(){ console.log('点击了li') },true) // 修改为true 捕获传递 </script>
此时点击li标签，控制台依次打印
点击了li p ul
这个例子先是触发了当前的li元素的点击事件，再由内到外传递事件
removeEventListener() 方法用于移除由 addEventListener()方法添加的事件句柄。
移除事件监听除了要指定相应的元素，事件名称外，还需要知道对应的回调函数。
如果添加事件监听时回调函数是匿名的，则无法移除
// 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("click", myFunction); // 移除 <div> 元素的事件句柄 document.getElementById("myDIV").removeEventListener("click", myFunction);
注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄。
可以通过封装函数来解决兼容性问题
function addEvent(obj,type,func){ if (obj.addEventListener) { obj.addEventListener(type, func,false); } else { obj.attachEvent("on"+type, func); } } function removeEvent(obj,type,func){ if (obj.removeEventListener) { obj.removeEventListener(type, func,false); } else { obj.detachEvent("on"+type, func); } }
我们还可以使用属性赋值的形式添加事件监听
<p onclick="test('p')">11111</p>
或者
document.querySelector('p').onclick=function(){ }
可以通过检测属性值的方式来知道这个元素是否有绑定了事件监听
<p onclick="test('p')">11111</p> <p>22222</p>
<script> function test(msg){ console.log(msg) } var nodes = document.querySelectorAll('p') for(var i=0;i<nodes.length;i++){ if(nodes[i].onclick !== null){ console.log('此元素通过onclick进行了事件监听') }else{ console.log('此元素没有onclick事件监听') } } </script>
运行结果：
此元素通过onclick进行了事件监听 此元素没有onclick事件监听
on + 事件名称使用的是冒泡传递
<body> <ul onclick="test('ul')"> <li onclick="test('li')"> <p onclick="test('p')">1111</p> </li> </ul> </body> </html> <script> function test(msg){ console.log(msg) } </script>
点击这个区域，依次打印（事件由内到外传递）
p li ul - 以属性赋值的形式添加事件监听会被后面的值覆盖
<script> var div = document.querySelector('div') div.onclick=function(){ alert('hello world') } div.onclick=function(){ alert('被我替换了') } </script>
点击div元素弹出 '被我替换了'
你还可以给onclick赋值为null，这样就相当于移除了事件监听
- addEventListener()添加监听不会被覆盖
<script> var div = document.querySelector('div') div.addEventListener('click',function(){ console.log('hello world') }) div.addEventListener('click',function(){ alert('hello world') }) </script>
点击div元素除了弹窗外，控制台也会打印 'hello world'
来源：博客园
作者：---空白---
链接：https://www.cnblogs.com/OrochiZ-/p/11585725.html