JS事件:冒泡与捕获

事件流

事件冒泡

概念:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到最不具体的那个节点(文档)

事件捕获

概念:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件

事件处理程序

HTML事件处理程序

将事件处理程序直接加在HTML文档结构内

缺点:不满足结构、样式、行为分离的原则

DOM0级事件处理程序

较传统的方式:把一个函数赋值给一个事件的处理程序属性

1
2
3
btn.onclick = function(){
alert('hello world!')
}

DOM2级事件处理程序

DOM2级事件定义了两个方法:用于处理指定删除事件处理程序的操作

  • addEventListener()
  • removeEventListener()

语法element.addEventListener(event, function, useCapture)

  • event:指定事件名。注意: 不要使用on前缀。 例如,使用click,而不是使用onclick
  • function:指定要事件触发时执行的函数。
  • useCapture:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

    true表示事件句柄在捕获阶段执行

    false默认。事件句柄在冒泡阶段执行

注意:通过addEventListener添加的事件只能通过removeEventListener来删除,而不能通过DOM0级事件处理程序来删除

IE事件处理程序及跨浏览器解决方案

  • attachEvent() 添加事件
  • detachEvent() 删除事件

语法target.attachEvent(event, function)

  • event: 字符串,事件名称,含on,比如onclickonmouseover等。
  • function :指定要事件触发时执行的函数

不使用第三个参数useCapture的原因:IE8以及更早的浏览器版本只支持事件冒泡


跨浏览器事件处理程序

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
26
27
28
29
30
31
// 跨浏览器事件处理程序
var EventUtil = {
// 添加事件
addHandler:function (element,type,handler) {
if(element.addEventListener){
element.addEventListener(type, handler,false);
} else if (element.attachEvent) {
element.attachEvent("on" + type,handler);
}else {
element["on" + type] = handler;
}
},
// 删除事件
removeHandler:function (element,type,handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler,false);
} else if (element.detachEvent) {
element.detachEvent("on" + type,handler);
}else {
element["on" + type] = null;
}
}
};
// 调用方法
var btn = document.getElementById("myBtn");
var handler = function () {
alert("Clicked");
};

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

事件对象

DOM中的事件对象

  • type属性: 用于获取事件类型
  • target属性: 用于获取事件目标

    1
    2
    3
    4
    5
    6
    btn.onclick = function(e){
    console.log(e.type);
    console.log(e.target);
    console.log(e.target.nodeName);
    console.log(e.target.value);
    }
  • stopPropagation()方法: 用于阻止事件冒泡

  • preventDefault()方法: 用于阻止事件的默认行为

IE中的事件对象

  • type属性: 用于获取事件类型
  • srcElement属性: 用于获取事件目标

    1
    2
    3
    4
    5
    6
    btn.onclick = function(e){
    console.log(e.type);
    console.log(e.srcElement);
    console.log(e.srcElement.nodeName);
    console.log(e.srcElement.value);
    }
  • cancelBubble属性: 用于阻止事件冒泡 true/false

  • returnValue属性: 用于阻止事件的默认行为 true/false,设置为false阻止事件默认行为

JS阻止事件默认行为和冒泡的兼容写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//阻止冒泡的兼容性写法
function stopPropagation(event){
var e=arguments.callee.caller.arguments[0]||event;
if(e&&e.stopPropagation){
// this code is for Mozilla and Opera
e.stopPropagation();
}else if(window.event){
// this code is for IE
window.event.cancelBubble=true;
}
}
//阻止浏览器默认行为的兼容性写法
function stopDefault(event){
var e=arguments.callee.caller.arguments[0]||event;
//阻止默认浏览器动作(W3C)
if(e&&e.preventDefault){
e.preventDefault();
}else{
//IE中阻止函数默认动作的方式
window.event.returnValue=false;
}
return false;
}
文章目录
  1. 1. 事件流
    1. 1.1. 事件冒泡
    2. 1.2. 事件捕获
  2. 2. 事件处理程序
    1. 2.1. HTML事件处理程序
    2. 2.2. DOM0级事件处理程序
    3. 2.3. DOM2级事件处理程序
    4. 2.4. IE事件处理程序及跨浏览器解决方案
  3. 3. 事件对象
    1. 3.1. DOM中的事件对象
    2. 3.2. IE中的事件对象
    3. 3.3. JS阻止事件默认行为和冒泡的兼容写法
|