12-js事件补充

一、事件的传播机制

当一个子级元素触发事件时，所有父级都会触发相同的事件

例如：小盒子在大盒子内部，点击小盒子就会点到大盒子

注意：

1. 只会传播同类事件
2. 只会从点击元素开始，按html的层级结构逐层向上触发事件
3. 无论内部元素有没有该事件，只要上层元素有事件即会被触发

二、事件目标、冒泡和捕获

1. 事件目标

语法：事件对象.target（标准浏览器） 或者 事件对象.srcElement（ie78）

onDiv.addEventListener("click",function(e){
    console.log("事件目标：",e.target)
})
1
2
3

2. 冒泡和捕获

语法：dom元素.addEventListener('事件类型',事件处理函数,false/true)

第三个参数不写，默认是false。

false：冒泡；true：捕获。

冒泡：自底向上

被点击元素 => 逐层向上的父级 => document => window

捕获：自顶向下

window => document => 逐层向下的父级 => 被点击元素

3. 鼠标的移入和移出事件

第一对：mouseover / mouseout【会冒泡】

第二对：mouseenter / mouseleave【不会冒泡】

一般使用第二对，第一对因为会冒泡事件，所以做判断逻辑上会有一些问题。

sonDiv.onmouseover = function(){
    console.log("移入son")
}
sonDiv.onmouseout = function(){
    console.log("移出son")
}
fatherDiv.onmouseover = function(){
    console.log("移入father")
}
fatherDiv.onmouseout = function(){
    console.log("移出father")
}
-----------------
sonDiv.onmouseenter = function(){
    console.log("移入son")
}
sonDiv.onmouseleave = function(){
    console.log("移出son")
}
fatherDiv.onmouseenter = function(){
    console.log("移入father")
}
fatherDiv.onmouseleave = function(){
    console.log("移出father")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、事件委托

根据事件冒泡原理，将子元素上的事件绑定到父级元素上去完成。

优势：

1. 可以用于给动态生成的标签绑定事件

2. 减少事件绑定次数，提供性能

如果需要靠点击移除img，可以借助window的click事件，当发现事件目标是img，就remove掉。

这个实现思路就是事件委托。

window.onclick = function(e){
    var target = e.target;
    if(target.className == "img"){
        target.remove();
    }
}
1
2
3
4
5
6

四、阻止事件传播

语法：事件对象.stopPropagation()

ie78：事件对象.cancelBubble = true

这个方法可以阻止冒泡和捕获

事件处理函数里面的this就是事件源

for(var i=0;i<imgS.length;i++){
    imgS[i].onclick = function(e){
        this.remove();//删除这个imgS[i]元素
    }
}
1
2
3
4
5

五、阻止浏览器默认行为

语法：

1. 标准浏览器： 事件对象.preventDefault()
2. ie78：事件对象.returnValue = false
3. onxxx事件绑定：return false

a.onclick = function(e){
    e.returnValue = false;
}
form.addEventListener("sumbit",function(e){
    e.preventDefault();
})
// dom0级
div.oncontextmenu = function(){
    return false;
}
1
2
3
4
5
6
7
8
9
10