12.1 事件监听器
在JavaScript中,想要给元素添加一个事件,其实我们有以下2种方式。
(1)事件处理器
在前面的学习中,如果想要给元素添加一个事件,我们都是通过操作HTML属性的方式来实现,这种方式其实也叫“事件处理器”,例如
oBtn.onclick = function(){……};
如果想要解除“事件处理器”添加的事件,我们可以使用“obj.事件名 = null;”
(事件处理器是没办法为一个元素添加多个相同事件的)
(2)事件监听器
1.绑定事件
所谓的“事件监听器”,指的是使用addEventListener()方法来为一个元素添加事件,我们又称之为“绑定事件”。
obj.addEventListener(type , fn , false)
①obj是一个DOM对象,指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
②type是一个字符串,指的是事件类型。例如单击事件用click,鼠标移入用mouseover等。一定要注意,这个事件类型是不需要加上“on”前缀的。
③fn是一个函数名,或者一个匿名函数。
④false表示事件冒泡阶段调用。对于事件冒泡,我们在JavaScript进阶教程再详细介绍。这里简单了解即可
2.解绑事件
在JavaScript中,我们可以使用removeEventListener()方法为元素解绑(或解除)某个事件。解绑事件与绑定事件是相反的操作
obj.removeEventListener(type , fn , false);
tips: 如果你想要使用removeEventListener()方法来解除一个事件,那么当初使用addEventListener()添加事件的时候,就一定要用定义函数的形式。
12.2 event对象
当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是event对象。每一个事件,都有一个对应的event对象。
tips: e.keyCode返回的是一个数字,而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值(true或false),我们注意一下两者的区别。
12.3 this
在事件操作中,可以这样理解:哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象。
案例分析:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onclick = function ()
{
oLi[i].style.color = "hotpink";
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
一开始想要实现的效果是:点击哪一个li元素,就改变这个li元素的颜色。很多人自然而然就写下了上面这种代码。然后测试的时候,会发现完全没有效果。这是怎么回事呢?我们试着把oLi[i].style.color = “hotpink”;这一句换成this.style.color = “hotpink”;就有效果了。
为什么用oLi[i]就不正确,而必须要用this呢?其实这就是典型的闭包问题。对于闭包,我们在JavaScript进阶中再详细介绍。