JavaScript DOM 事件句柄
句柄就是指如何触发一个事件
DOM EventListener
addEventListener()方法用于像指定元素添加事件句柄;
moveEventListener()方法用于移除方法添加的事件句柄;
如果给DOM对象绑定同一个事件指定不同的方法,则只有最后一个会生效。而使用addEventListener()方法则可以给同一个对象添加多个事件句柄。使用方法如下
element.addEventListener(type,listener,useCapture);其中,第一个参数是指触发的事件,第二个参数一般是JavaScript函数,第三个参数是可选的,用于描述事件是捕获还是冒泡。
冒泡:内部元素的事件会先被触发,外部元素的事件后被触发。
捕获:外部元素的事件先被触发,内部元素的事件后被触发。
用法:假设我想实现在浏览器中点击按钮出现警告弹窗,不使用addEventListener()方法的时候,一般这样做
</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="div">hello</p>
<input type="button" value="点我" οnclick="demo();"/>
<script type="text/javascript">
function demo(){
alert("world");
}
</script>
</body>
</html>
如果这个时候我想改变函数的名称,那我势必要对所以的“demo”进行修改,如果代码量十分大的话,这就显得很不明智。而我们可以通过添加事件句柄来避免这个问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="but">点我</button>
<script type="text/javascript">
document.getElementById("but").addEventListener("click",function(){
alert("hello world");
});
</script>
</body>
</html>
值得注意的是,触发函数的事件是"click"而不是"onclick"
除此之外,上面我们也谈到过,addEventListener()方法能给事件添加多个句柄而不会被覆盖。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
.kk{
width: 200px;
height:200px;
background-color: red;
margin:0 auto;
}
</style>
</head>
<body>
<div class="kk">
<p id="word">hello</p>
</div>
<script type="text/javascript">
var x=document.getElementById("word");
x.addEventListener("mouseover",change);
x.addEventListener("mouseout",demo);
function change()
{
x.innerHTML="hello world";
}
function demo(){
x.innerHTML="world world";
}
</script>
</body>
</html>
比如这样,mouseover和mouseout都绑定在一个对象即"x"上面,但是他们所触发的事件都可以正常执行。
图片来自w3cschool,这是支持removeEventLisener()方法的浏览器版本。
removeEventListener()方法用来移除addEventListener()方法添加的事件句柄。
使用方法:element.removeEventListener(type,listener)。
比如上边举例子的代码,如果再添加事件句柄后,用removeEventListener()将他移除了,那么本该被触发的函数将不会再执行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="but">点我</button>
<script type="text/javascript">
var x=document.getElementById("but");
x.addEventListener("click",myfunction);
function myfunction(){
alert("hello world");
}
x.removeEventListener("click",myfunction);
</script>
</body>
</html>