javascript - 事件详解

一、事件流

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>

3.DOM2级事件处理

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



removeEventListener();

<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：获取事件目标

<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();
}

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）
}

----->

------>