JS--事件（一）

2017-03-22 本文已影响0人 FeRookie

事件流

事件流描述的是从页面中接受事件的顺序，在IE中的事件流是事件冒泡，在Netscape的事件流是事件捕获流。

事件冒泡
IE的事件流叫做事件冒泡，即事件开始是由最具体的元素接受，然后逐级向上传播到较不具体的节点（文档）。有的浏览器会跳过body元素直接冒泡到document上，有些浏览器还会一直冒泡到window对象上。基本上所有的浏览器都支持事件冒泡。
事件捕获
Netscape提出另外一种事件流是事件捕获，事件捕获的思想是首先不太具体的节点应该更早的接受到事件，而具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
在IE9，Safari，chrome，opera，Firefox中也都支持事件捕获流，DOM2级事件要求事件从document开始传播，但这些浏览器还是从window对象开始捕获事件。

注：一些老版本的浏览器并不支持事件捕获，所以我们可以放心的使用事件冒泡。

DOM事件流
DOM2级事件规定事件流包括：事件捕获阶段，处于目标阶段，事件冒泡阶段。注意，事件捕获阶段中，事件还是不会到目标元素上，目标元素上发生的事件可以看做是事件冒泡的一部分。

注意：在IE9，Safari，chrome，Firefox，opera9.5等浏览器都会在事件捕获阶段触发事件对象上的事件。

事件处理程序

关于在文档中响应某种事件的函数我们把称作事件处理程序（事件侦听器），事件处理程序的名称以on开头，为事件指定处理程序的方式有以下几种：

HTML事件处理程序

<input type='button' onclick='alert("hello world")'>

function show(){
  alert('hello world')
}
<input type='button' onclick='show()'>

这样指定事件处理程序有一些特别的地方。第一，这样创建一个封装着元素属性值的函数，这个函数中有个局部变量event，也就是事件对象

<input type='button' onclick='alert(event.type)'>
//这样你不用自己定义它，用不用从函数的参数列表中去获取

第二，在这个函数内部，this值等于事件的目标元素：

<input type='button' onclick='alert(this)'>

以这种方式绑定事件处理程序有以下三个缺点：

时差问题，当事件执行时，事件处理程序还未定义；
扩展处理程序的作用域链在不同浏览器中导致不同的结果；
HTML代码和JS代码耦合太强，不符合结构，样式，行为分离的标准；

DOM0级事件处理程序
通过JavaScript指定事件处理程序，就是将一个函数赋值给一个事件处理程序属性。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。

var btn = document.getElementById('myBtn')
btn.onclick = function(){
  alert('hello world')
}

使用DOM0级方法指定事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行。换句话说，程序中的this引用当前元素。
也可以删除通过DOM0级方法指定的事件处理程序：

btn.onclick = null

DOM2级事件处理程序
DOM2级事件，该级别事件中定义了两个方法，用于指定和删除事件处理程序的操作：

addEventListener()
removeEventListener()
所有DOM节点都包含这个两个方法，都接受三个参数：
要处理的事件名
事件处理程序的函数
布尔值（true表示在捕获阶段调用该事件处理程序，false表示冒泡阶段调用）

var btn = document.getElementById('btn')
btn.addEventListener('click', function(){
alert('hello')
}, false)

同DOM0级事件一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。

var btn = document.getElementById('btn')
btn.addEventListener('click', function(){
  alert(1)
},false)

btn.addEventListener('click', function(){
  alert(2)
},false)

如上，通过DOM2级事件绑定方法，可以绑定多个事件处理程序函数，它会一一的执行，但是通过DOM0级只能绑定一个事件处理程序，如果写第二个则会覆盖掉前一个。

通过addEventListener绑定的事件可以通过removeEventListener来移除，移除时传入的参数和绑定事件处理程序参数相同（注意：如果通过addEventListener绑定的匿名函数无法移除），如下可以正常解除：

var fn = function(){
alert(1)
}

var btn = document.getElementById('btn')
btn.addEventListener('click', fn, false)
btn.removeEventListener('click', fn, false)  //移除

IE事件处理程序
IE中实现与DOM中类似的两个方法：

attachEvent()
detachEvent()
这两个方法接受相同的两个参数：
事件名称
事件处理程序函数

var btn = document.getElementById('btn')
btn.attachEvent('onclick', function(){
  alert(1)
})
//注意：这里的事件名称前面要加on

注意： 使用attachEvent方法，事件处理程序函数的执行环境是在全局作用域下，和DOM0级不一样。所以在该函数中的this指向的是window

在看以下情况，attachEvent方法也可以为一个元素绑定多个事件处理函数：

var btn = document.getElementById('btn')

btn.attachEvent('onclick', function(){
  alert(1)
})

btn.attachEvent('onclick', function(){
  alert(2)
})

执行以上代码，可以发现，执行的顺序和addEventListener的执行顺序是相反的。
detachEvent方法就不详细介绍了，用法和removeEventListener相对应的。

JS--事件（一）

事件流

事件处理程序

猜你喜欢

热点阅读