您的位置：首页 > Web前端 > JavaScript

JavaScript事件监听（attachEvent、 addEventListener）

2017-10-22 17:40 483 查看
事件监听：同一个事件绑定多个事件处理程序

IE：（IE8及以下查看效果）

对象.attachEvent(‘事件（on）’，‘事件处理程序’) 添加事件

对象.detachEvent(‘事件（on）’，‘事件处理程序’) 删除事件

案例：给一个div绑定两个处理程序，查看执行顺序（需要在IE8下查看效果）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.attachEvent('onclick',aa);
box.attachEvent('onclick',bb);
function aa(){
alert('这个是aa处理程序！');
}
function bb(){
alert('这个是bb处理程序！');
}
</script>
</body>
</html>


显示效果：



注：事件执行的时候先执行bb后执行的aa

想要删除事件的话可以用detachEvent

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.attachEvent('onclick',aa);
box.attachEvent('onclick',bb);
box.detachEvent('onclick',bb);//删除bb处理程序
function aa(){
alert('这个是aa处理程序！');
}
function bb(){
alert('这个是bb处理程序！');
}
</script>
</body>
</html>


显示效果：



说了这个还有一个另外一个事件监听

FF（兼容谷歌、火狐、IE8以上）

addEventListener(‘事件’，‘处理程序’，布尔值) 添加

removeEventListener(‘事件’，‘处理程序’，布尔值) 删除

案例：给一个div绑定两个处理程序，查看执行顺序（IE8以下不支持）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.addEventListener('click',aa,false);
box.addEventListener('click',bb,false);
function aa(){
alert('这个是aa处理程序！');
}
function bb(){
alert('这个是bb处理程序！');
}
</script>
</body>
</html>


显示效果：



点击div先触发aa，然后触发bb

注意：addEventListener方法可以为当前对象的同一事件，添加多个监听函数，这些函数按照添加的顺序触发，即先添加先触发，如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener方法手动去除）

案例：删除事件监听

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.addEventListener('click',aa,false);
box.addEventListener('click',bb,false);
box.removeEventListener('click',bb,false);//删除bb
function aa(){
alert('这个是aa处理程序！');
}
function bb(){
alert('这个是bb处理程序！');
}
</script>
</body>
</html>


显示效果


删除bb后只有aa执行了！！

**事件监听的优点：

1.可以绑定多个事件

2.可以解除相应的绑定**
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航