1.addEventListener() 基本用法
语法：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元素的点击事件，再由内到外传递事件
2.removeEventListener() 移除事件监听
removeEventListener() 方法用于移除由 addEventListener()方法添加的事件句柄。
移除事件监听除了要指定相应的元素，事件名称外，还需要知道对应的回调函数。
如果添加事件监听时回调函数是匿名的，则无法移除
// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("click", myFunction);
// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("click", myFunction);
3.addEventListener() 兼容性
注意： 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);
}
}
4.on + 事件名称
我们还可以使用属性赋值的形式添加事件监听
<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
5.不同之处
- 以属性赋值的形式添加事件监听会被后面的值覆盖
<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'