1. 内联HTML属性法
通过标签的特定属性来添加事件
<div onclick="alert('hello')">click</div>
2. 元素属性法
事实上,这种方式比内联HTML属性法要好,因为它可以帮助我们理清
html代码
<div id="su">click</div>
js代码
<script type="text/javascript">
var su = document.getElementById("su");
su.onclick = function() {
alert("hello");
alert("haha");
}
</script>
缺点是只允许我们指定一个处理函数,这样不太方便,所以我门需要使用 DOM 的事件监听器
3. DOM 事件监听器
addEventListener(参数1, 参数2, 参数3)
*事件类型的参数:click等
函数指针:可以是function()这样的匿名函数,也可以是console.log()这样的现存函数
布尔类型的参数:决定代码是否采用捕捉法来处理事件(下一节会详细讲述)*
html代码
<div id="su">click</div>
js代码
<script type="text/javascript">
var su = document.getElementById("su");
su.addEventListener('click', function() {
alert("hello");
}, false);
su.addEventListener('click', console.log, false);
</script>
我们可以为一个事件指定多个监听器函数,它们的工作是彼此独立的,任何一个函数的加入或退出,都不会影响其他监听器的工作。
4. 捕捉法和冒泡法
addEventListener 的第三个参数到底是什么?
假设我们有一个无序链接列表
<body>
<ul>
<li><a href="http://www.ranranup.com">我的博客</a></li>
</ul>
</body>
当我们单击该链接时,实际上我们也单击了列表项li / 列表ul / body 乃至整个 document对象,这就形成了一个事件传播链。这种事件传播过程的实现通常有两种方式:
捕捉法:单击首先发生在document上,然后依次传递给body、列表、列表项,并最终到达该链接
冒泡法:单击首先发生在链接上,然后逐层向上冒泡,直至document对象
通过 addEventListener 的第三个参数,我们可以决定是否采用捕捉法来处理事件,事实上,为了让我们的代码适用于更多的浏览器,最好还是始终将其设置为false,即只使用冒泡法来处理事件(IE只使用冒泡法)
5. 防止默认行为
preventDefault()
需要提醒的是,并不是所有的默认行为都是可以禁止的,尽管大部分事件是可以的,但如果真的有必要确定一下,可以检测事件对象的cancellable属性
6. 神奇的IE
IE中没有 addEventListener() 方法,但是它从IE5开始就提供了一个叫做 attachEvent() 的等效方法
对于单击事件来说,使用 addachEvent() 就等同于使用 onclick 属性
使用老式手法进行事件监听,例如通过将某个函数赋值给 onclick 属性,那么当该回调函数被调用时,它不会获得相关的事件参数,但只要我们设置了事件监听器,IE就总会有一个全局的 window.event 指向该对象。
在IE的事件对象中,没有反映触发事件元素的target属性,但是我么可以使用它的等效属性 srcElement
IE不支持事件捕捉法,只使用冒泡法
IE没有 stopPropagation() 方法,我们可以将only-IE属性 cancelBubble 设置为 true 来完成相应的操作
IE没有 preventDefault() 方法,但是可以将only-IE属性 returnValue 设置为 true 来完成相应的操作
对于事件的取消监听操作,IE中使用的不是 removeEventListener() 方法,而是 detachEvent() 方法