事件
2017-04-30 本文已影响0人
程序猿人王小贱
1. 事件
IE的事件流是事件冒泡流
Netscape是的事件流是事件捕获流
DOM事件流 ：规定事件包括三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件流程.jpg
document > html > body > div (点击div元素事件)
在DOM事件流中，实际的目标元素(<div>元素)在捕获阶段不会接收到事件。这就意味着在捕获阶段，事件从document到<html>到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>元素上发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。
2. 事件处理程序：响应事件的程序。
2.1 HTML事件处理程序：会创建一个封装着元素属性值的函数。
- 函数中有一个局部变量event，也就是事件对象。
- 在函数内部，this值等于事件的目标元素。
<input type="button" name="btn" value="Click Me" onclick="showMessage(event)" />
2.2 DOM0级事件处理程序：通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给事件处理程序。
- 每个元素(包括
window和document)都有自己的事件处理程序，如onclick、onready，属性的值设置为一个函数，就可以指定事件处理程序。
- 使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此事件处理程序是在元素的作用中运行，所以
this引用当前元素。 - 事件对象：
event - 删除事件处理程序：
null
var btn = document.getElementById('myBtn');
btn.onclick = function(){
alert();
}
btn.onclick = null;//删除事件处理程序
2.3 DOM2级事件处理程序：指定和删除事件处理程序
- 接首3个参数：
处理的事件名、处理函数、是否冒泡
node.addEventListener(eventName, fn, boolean);
node.removeEventListener(eventName, fn, boolean);
boolean: - true 捕获阶段调用事件处理程序
- false 冒泡阶段调用事件处理程序
- 通过addEventListener()添加的事件处理程序只能用removeEventListener()移除，移除时传入的参数使用相同。意味着通过addEventListener()添加的匿名函数将无法移除。
- 可以添加多个事件处理程序，按照添加的顺序触发，同一个事件名也可以添加多次，按照添加的顺序执行。
- 一般情况下都是将事件事件处理程序添加到冒泡阶段
false，可以最大限度的兼容各种浏览器。
<button type="button" id="btn">Click Me</button>
<script type="text/javascript">
"use strict"
var btn = document.getElementById('btn');
//事件不能取消，事件处理程序为匿名函数
btn.addEventListener('click', function(event){
console.log(this, event);//先执行1
}, false);
btn.addEventListener('click', function(event){
console.log(this, event);//后执行2
}, false);
</script>
2.4 IE事件处理程序
- 接受两个相同的参数：
事件名、处理函数
attachEvent(eventName, fn);
detachEvent(eventName, fn);
- IE8及更早版本只支持事件冒泡，所以事件处理程序都会被添加到冒泡阶段。
- 事件名是以
on开头（与DOM级事件处理程序事件名一样，如onclick）。 - IE事件处理程序会在全局作用域中执行，
this指向window。 - 添加多个事件处理程序，以相反的顺序触发。
<button type="button" id="btn">Click Me</button>
<script type="text/javascript">
"use strict"
var btn = document.getElementById('btn');
var handler = function(){
alert(this);//IE事件作用域全局，this === window
}
btn.attachEvent('onclick', handler);//事件处理程序使用匿名函数将不能删除事件
btn.attachEvent('onclick', handler);
btn.detachEvent('onclick', handler);//删除事件处理程序，参数必须完全相同
</script>
view
2.window对象
1.window对象
2.5 跨浏览器事件处理程序
<script type="text/javascript">
var EventUtil = {
addHandler: function(elem, type, handler){
if (elem.addEventListener) { //DOM2级
elem.addEventListener(type, handler, false);
}else if(elem.attachEvent) { //IE事件处理程序
elem.attachEvent("on" + type, handler); //兼容IE8及以下，加上on前缀
}else{ //DOM0级
elem["on" + type] = handler;
}
},
removeHandler: function(elem, type, handler){
if (elem.removeEventListener) { //DOM2级
elem.removeEventListener(type, handler, false);
}else if(elem.detachEvent) { //IE事件处理程序
elem.detachEvent("on" + type, handler); //兼容IE8及以下，加上on前缀
}else{ //DOM0级
elem["on" + type] = null;
}
}
}
</script>
3. 事件对象
所有浏览器都支持
event对象。
** 3.1 DOM级事件对象**
-
currentTarget:this始终等于currentTarget，正在处理事件的元素。 -
preventDefault():event.preventDefault()阻止特定事件的默认行为. -
cancelabel: 设置为true，才可以使用preventDefault()来取消默认行为。 -
stopPropagation(): 立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。 -
eventPhase: 事件处理处于哪个阶段（1:捕获阶段， 2:目标阶段，3:冒泡阶段）
