JavaScript事件机制详解：从事件流到处理程序

事件基本概念

事件的概念

事件是指文档或浏览器窗口中发生的特定交互瞬间。通过注册侦听器（或称处理程序），可以在事件发生时执行预设的代码逻辑。

事件流原理

一、事件流

1. 事件流：描述页面中接收事件的顺序。

2. 事件冒泡：事件由最具体的元素接收，随后逐级向上传播至最不具体的节点（即文档）。

3. 事件捕获：最不具体的节点先接收事件，而最具体的节点最后接收事件。

事件处理程序分类

二、事件处理

1. HTML事件处理：直接将事件处理代码添加到HTML结构中。

2. DOM0级事件处理：将一个函数赋值给事件处理程序属性。

3. DOM2级事件处理：

使用 addEventListener("事件名", "事件处理函数", 布尔值)。

布尔值为 true 时，表示事件捕获。

布尔值为 false 时，表示事件冒泡。

使用 removeEventListener() 移除事件监听。

4. IE事件处理程序

使用 attachEvent 添加事件。

使用 detachEvent 移除事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<!--<script>
function demo(){
alert("Hello HTML事件处理");
}
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello DOM0级事件处理程序")};//被覆盖掉
btn1.onclick = function(){alert("Hello DOM0级事件处理程序2")};
btn1.onclick = function(){alert("Hello DOM0级事件处理程序3")};
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
function demo3(){
alert("DOM2级事件处理程序3");
}
btn1.removeEventListener("click",demo2)
</script>-->
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo)
}else{
btn1.onclick = demo();
}
function demo(){
alert("Hello");
}
</script>
</body>
</html>

事件对象详解

三、事件对象

1. 事件对象：触发DOM事件时，系统会自动生成一个事件对象。

2. 事件对象 event 的属性与方法：

type：获取事件类型。

target：获取触发事件的目标元素。

stopPropagation()：用于阻止事件冒泡。

preventDefault()：用于阻止事件的默认行为。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
<a href="http://www.baidu.com" id="aid">百度</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
// alert(event.type);
alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div")
}
function showA(event){
// event.stopPropagation();
// event.preventDefault();
}
</script>
</body>
</html>