1.addEventListener()
描述:addEventListener()方法用于向指定元素添加事件
语法:元素节点.addEventListener('type',ListenFunc,useCapture);
参数:
(1)第一个参数表示绑定事件的类型,【没有on!是个字符串】
(2)第二个参数表示监听函数,就是事件发生的时候执行的哪个函数(也可以使用函数名,来引用外部函数)
(3)第三个参数是否采用捕获机制,默认不写和false都代表冒泡机制,true代表捕获
注意:addEventListener()方法允许绑定多个执行函数,并且执行顺序按照绑定顺序执行
2.事件传递
描述:事件不仅能够和触发者进行交互,还能够在特定的情况下沿着domTree逐级传递,
和domTree的各个节点进行交互。这种事件的这种特性称为【事件传递机制】
类型:
(1)事件冒泡:事件从最具体的元素出发,沿domTree逐级向上传递,直到最不具体的节点停止
(2)事件捕获:事件从最不具体的节点开始触发,沿domTree逐级向下传递,直到最具体的元素停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: skyblue;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>点我冒泡</p>
</div>
<script type="text/javascript">
var p = document.querySelector('p');
var div = document.querySelector('div');
var html = document.querySelector('html');
p.addEventListener('click',function(){
console.log('p被点击了');
});
div.addEventListener('click',function(){
console.log('div被点击了');
});
html.addEventListener('click',function(){
console.log('html被点击了');
});
</script>
</body>
</html>
代码运行效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: skyblue;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>点我捕获</p>
</div>
<script type="text/javascript">
var p = document.querySelector('p');
var div = document.querySelector('div');
var html = document.querySelector('html');
p.addEventListener('click',function(){
console.log('p被点击了');
},true);
div.addEventListener('click',function(){
console.log('div被点击了');
},true);
html.addEventListener('click',function(){
console.log('html被点击了');
},true);
</script>
</body>
</html>
3.removeEventListener()
描述:本方法可以移除由 addEventListener()方法添加的事件
语法:元素节点.addEventListener('type',ListenFunc,useCapture);
参数:
(1)第一个参数表示移除事件的类型,【没有on!是个字符串】
(2)第二个参数表示移除监听函数
(3)第三个参数为可选参数,指定移除事件的阶段,默认不写和false是事件在冒泡阶段移除, true事件在捕获阶段移除
注意:
(1)如果要移除事件,addEventListener()的执行函数必须使用外部函数
(2)移出事件的函数名要与添加事件的函数名一致,否则无效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener</title>
</head>
<body>
<button type="button">你好</button>
<script>
var btn = document.querySelector('button');
//引用外部函数
btn.addEventListener('mouseover', myFunction);
btn.addEventListener('mouseout', mySecondFunction);
function myFunction() {
console.log('鼠标移入');
};
function mySecondFunction() {
console.log('鼠标移出');
};
</script>
</body>
</html>
//移除按钮的鼠标移出事件
btn.removeEventListener('mouseout',mySecondFunction,false);
4.事件兼容性写法
描述:IE8及更早IE版本,Opera7.0及Opera更早版本不支持addEventListener()和removeEventListener()方法。
对于不支持该函数的浏览器,可以使用attachEvent()方法和detachEvent()方法添加和移除事件。
添加事件兼容性写法:
var btn = document.getElementById('button');
if (x.addEventListener) {
btn.addEventListener('click', myFunction);
} else if (x.attachEvent) {
btn.attachEvent('onclick', myFunction);
}
移除事件兼容性写法:
var btn = document.getElementById('button');
if (x.addEventListener) {
btn.removeEventListener('click', myFunction);
} else if (x.attachEvent) {
btn.deachEvent('onclick', myFunction);
};