1. 事件流
描述的是从页面接收到事件的顺序，分为
-
事件冒泡
-
事件捕获
2.DOM事件流
包括三个阶段：事件捕获阶段（截获事件），处于目标阶段（实际的目标接收到事件），事件冒泡阶段（对事件作出响应）。
在事件捕获阶段不会接收到事件，直接进行下一阶段。
3.事件处理程序
响应 事件（用户或者浏览器的动作）的函数
- HTML事件处理程序
<script>
function showMessage() {
alert("hello")
}
</script>
<body>
<div onclick="showMessage()">click me</div>
</body>
html和javascript代码紧密耦合，修改起来不是很方便，要同时修改html和js代码
下面是使用javascript指定事件处理程序：
- DOM0级事件处理程序
<body>
<div id="div">click me</div>
</body>
<script>
var myDiv = document.getElementById("div")
myDiv.onclick = function () {
alert("hello");
}
</script>
- DOM2级事件处理程序
定义了addEventListener()，removeEventListener()，包含三个参数 绑定的事件，触发事件要执行的函数，布尔值（true表示事件捕获，false表示事件冒泡），默认为false。
<body>
<div id="div">click me</div>
</body>
<script>
var myDiv = document.getElementById("div")
myDiv.addEventListener("click", function a() {
alert(this.id);
}, false);
myDiv.removeEventListener("click", function a() {
alert(this.id);
}, false)
</script>
- IE事件处理程序
实现了与DOM中类似的方法，attachEvent()，detachEvent()，接收两个参数，事件处理名称和事件处理函数。
<body>
<div id="div">click me</div>
</body>
<script>
var myDiv = document.getElementById("div")
myDiv.attachEvent("onclick", function () {
alert(this.id);
});
myDiv.detachEvent("onclick", function () {
alert(this.id);
})
</script>
- 跨浏览器的事件处理程序
要保证处理事件能够在大多数的浏览器下一致的运行，可以用以下的方式- 首先创建一个addHandler()，负责判断使用DOM0级，DOM2级还是IE方法来添加事件。由三个参数：要操作的元素，事件名称，事件处理函数。
- 创建一个removeHandler()，移除事件处理程序。同样接收三个参数。
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
4.事件对象
在触发DOM事件的时候，会产生一个事件对象event，包含着和事件相关的信息。
this，event.currentTarget，event.target之间的关系：
var myDiv = document.getElementById("div")
myDiv.addEventListener("click", function (event) {
console.log(event);
console.log(this);
console.log(event.target);
console.log(event.currentTarget);
}, false);
document.body.addEventListener("click", function (event) {
console.log(event);
console.log(this);
console.log(event.target);
console.log(event.currentTarget);
}, false);
上面的结果可以看到 this和event.currentTarget 的值是一样的，而target是真正触发的元素。
5.如何阻止事件默认的行为
preventDefault()用于阻止事件默认的行为，比如阻止链接跳转，阻止submit提交等等。
<body>
<a href="http://www.w3school.com.cn" id="link">link</a>
</body>
var myDiv = document.getElementById("link")
myDiv.addEventListener("click", function (event) {
event.preventDefault();
}, false);
6.停止事件在DOM中的传播
stopPropagation()用于停止事件在DOM中的传播
var myDiv = document.getElementById("div")
myDiv.addEventListener("click", function (event) {
console.log("click div")
event.stopPropagation();
}, false);
document.body.addEventListener("click", function (event) {
console.log("click body")
}, false);
结果只输出了：click div
事件没有被document.body接收到。
网友评论