javascript - 事件详解

时间:2023-03-08 16:21:59

一、事件流

1.事件流

描述的是在页面中接受事件的顺序

2.事件冒泡

由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点

(最具体 –> 最不具体)

3.事件捕获

最不具体的节点先接收事件,而最具体的节点应该是最后接收事件

(最不具体 –> 最具体)

2.事件处理

1.HTML事件处理

直接添加到HTML结构中

2.DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

<button id="btn">按钮</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
alert("DOM0级事件处理1");//多个事件会被覆盖掉
}
document.getElementById("btn").onclick = function () {
alert("DOM0级事件处理2");
}
</script>

javascript - 事件详解

3.DOM2级事件处理

addEventListener(“事件名”,”“事件处理函数”,“布尔值”)

当前版本,一般布尔值都不操作。

true:事件捕获

false:事件冒泡

removeEventListener();

javascript - 事件详解

<button id="btn">按钮</button>
<button id="btn2">DOM2级按钮</button>
<script type="text/javascript">
//document.getElementById("btn").onclick = function () {
// alert("DOM0级事件处理1");//多个事件会被覆盖掉
//}
//document.getElementById("btn").onclick = function () {
// alert("DOM0级事件处理2");
//} var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", function () {
alert("DOM2级事件处理1");
}) btn2.addEventListener("click", demo1);
btn2.addEventListener("click", demo2); function demo1() {
alert("DOM2级事件处理2");
} function demo2() {
alert("DOM2级事件处理3");
}
//移除
//btn2.removeEventListener("click", demo2);
</script>

4.IE事件处理程序

attachEvent

detachEvent

3.事件对象

事件对象event

1).type:获取事件类型

2).target:获取事件目标

javascript - 事件详解

<div id="div1">
<button id="btn1">按钮</button>
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var div1 = document.getElementById("div1");
btn1.addEventListener("click", showType);
div1.addEventListener("click", showDiv);
function showType(event) {
document.write(event.type+"<br>");
document.write(event.target + "<br>");
} function showDiv(event) {
alert("div");
}
</script>

3).stopPropagation():阻止事件冒泡

没有调用showDiv,冒泡被取消了。

function showType(event) {
document.write(event.type+"<br>");
document.write(event.target + "<br>"); //组织事件冒泡
event.stopPropagation();
}

javascript - 事件详解

4).preventDefault():组织事件默认行为

(1)

<a id="aid" href="http://www.baidu.com">百度</a>

js

 document.getElementById("aid").addEventListener("click", showaid);
function showaid() {
alert(1);
}

(2)在showaid方法里面,添加

e.stopPropagation();//阻止事件冒泡

(3)阻止默认行为

function showaid(e) {
alert(1);
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止默认行为(这里是跳转baidu)
}

javascript - 事件详解 ----->javascript - 事件详解------>javascript - 事件详解