dom0级事件:
绑定事件element.οnclick=function(){}
元素绑定同一类型事件时,后面的效果会覆盖前面的效果,如下代码,点击”点击“时,弹出框提示文字2,这表示,alert(2)覆盖了前面的alert(1)效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">点击</div>
<script type="text/javascript">
var app=document.getElementById('app');
app.οnclick=function(){
alert(1);
}
app.οnclick=function(){
alert(2);
}
</script>
</body>
</html>
移除事件element.οnclick=null;
dom2级事件:
绑定事件element.addEventListener('事件类型',‘事件处理函数',true/false);
第三个参数:true表示捕获,false表示冒泡,不填时默认为false
元素可以绑定多个事件,可以是同类型的,也可以是不同类型的,同一类型事件时,后面的效果不会覆盖前面的效果,效果在时间上有先后顺序;如下代码,点击”点击“时,弹出框先提示文字1,再提示文字2,接着鼠标移出”点击“时,弹出文字3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">点击</div>
<script type="text/javascript">
var app=document.getElementById('app');
app.addEventListener('click', fun1);
app.addEventListener('click',fun2);
app.addEventListener('mouseout',fun3);
function fun1(){
alert(1);
}
function fun2(){
alert(2);
}
function fun3(){
alert(3);
}
</script>
</body>
</html>
移除事件element.removeEventListener(('事件类型',‘事件处理函数',true/false);
需注意的是:removeEventListener与addEventListener 的函数参数必须完全一致,才能移除有效
下面列举一下两种事件特殊情况:
1.(函数)为匿名函数时,移除无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#" id="a">百度一下,你就知道</a>
<script type="text/javascript">
var a=document.getElementById('a');
a.addEventListener('click',function(){alert(1);},false);
a.removeEventListener('click',function(){alert(1);},false);//无效,点击a元素时仍然会弹出1
</script>
</body>
</html>
2.(函数)带参数时,绑定事件无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" id="a">百度一下,你就知道</a>
<script type="text/javascript">
var a=document.getElementById('a');
function fun1(e){
e.preventDefault();
alert(1);
}
a.addEventListener('click',fun1(e));//阻止跳转无效,点击a链接后仍然跳转到百度
</script>
</body>
</html>
因此带参数的函数,应改为下列模式,用一个变量指向一个函数,这样绑定事件有效,移除也有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" id="a">百度一下,你就知道</a>
<script type="text/javascript">
var a=document.getElementById('a');
var fun1=function(e){
e.preventDefault();
alert(1);
}
a.addEventListener('click',fun1);
a.removeEventListener('click',fun1);
</script>
</body>
</html>