JavaScript事件

JavaScript事件详解
事件流
事件处理
事件对象

事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理
1、HTML事件处理：直接添加到HTML结构中

<button id="btn" onclick="hello()">按钮</button>
<script>
function hello() {
alert("hello")
}
</script>

缺点：如果事件名字修改需要修改两处，当代码量很大时，不太友好

2、DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn");
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理")
}
btn1.onclick = null;//清除点击事件
</script>

缺点：事件会被覆盖掉

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn");
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理1")
}
btn1.onclick = function () { //添加事件点击
alert("hello 0级事件处理2")
}
</script>

3、DOM2级事件处理

addEventListener（“事件名”，“事件处理函数”，“布尔值”）；
true:事件捕获
false：事件冒泡
removeEventListener（）；

<button id="btn" onclick="hello()">按钮</button>
<script>
var btn1 = document.getElementById("btn").addEventListener("click",function () {
alert("DOM 2级事件处理程序")
})
</script>

优点：并不覆盖click的点击事件

4、IE事件处理程序 IE8以下只能支持以下两个方法 方法与DOM2级事件类似
attachEvent 添加事件
detachEvent 移除事件

事件对象
在触发DOM事件的时候都会产生一个对象
事件对象event：
1、type：获取事件类型

<button id="btn" onclick="hello()">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",showType);
function showType(event) {
alert(event.type) 会弹出click
}
</script>

2、target：获取事件目标

<button id="btn" onclick="hello()">按钮</button>
<script>
document.getElementById("btn").addEventListener("clixk",showType);
function showType(event) {
alert(event.target); 
}
</script>

3、stopPropagation()：阻止事件冒泡

<div id="div">
<button id="btn" onclick="hello()">按钮</button>
</div>

<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",show);
function showType(event) {
//alert(event.type)
alert(event.target);
event.stopPropagation();//组织事件冒泡
}
function show() {
alert(event.target);
}
</script>

4、preventDefault():阻止事件默认行为

document.getElementById("btn").preventDefalut();