事件

2019-05-20 本文已影响0人 pengtoxen

js和html之间的交互是以事件实现的.

事件冒泡

事件开始的顺序从绑定事件的元素开始,逐级向父级元素传递.

<!DOCTYPE html>
<html>
<head>
 <title>Event Bubbling Example</title>
</head>
<body>
 <div id="myDiv">Click Me</div>
</body>
</html>

我们给id="myDiv"的元素绑定一个click事件,当我们点击这个元素的时候,事件会按照如下传播顺序传播

(1) <div>
(2) <body>
(3) <html>
(4) document

事件捕获

事件开始的顺序从最外面的元素开始,逐级向儿子元素传递

<!DOCTYPE html>
<html>
<head>
 <title>Event Bubbling Example</title>
</head>
<body>
 <div id="myDiv">Click Me</div>
</body>
</html>

我们给id="myDiv"的元素绑定一个click事件,当我们点击这个元素的时候,事件会按照如下传播顺序传播

(1) document 
(2) <html>
(3) <body>
(4) <div>

目前的主流浏览器都支持事件冒泡和事件捕获,默认采用的是事件冒泡.但是我们也可以在需求的时候设置为事件捕获.

DOM事件流

在 DOM 事件流中,实际的目标（<div>元素）在捕获阶段不会接收到事件,这意味着在捕获阶段,事件从 document 到<html>再到<body>后就停止了.下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分.然后,冒泡阶段发生,事件又传播回文档.

DOM0级事件处理程序

//绑定事件处理程序
//this引用当前元素
var btn = document.getElementById("myBtn");
btn.onclick = function(){
 alert(this.id); //"myBtn"
}; 
//删除事件处理程序
btn.onclick = null;

DOM2级事件处理程序

addEventListener处理函数有3个参数,分别是要处理的事件名,作为事件处理程序的函数和一个布尔值.最后这个布尔值参数如果是 true,表示在捕获
阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序.

//绑定事件处理程序
//this引用当前元素
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
 alert(this.id);
}, false);
//可以添加多个事件处理程序
btn.addEventListener("click", function(){
 alert("Hello world!");
}, false);

通过addEventListener的事件处理程序只能通过removeEventListener来移除.

//匿名函数无法被移除
btn.removeEventListener("click", function(){ //没有用！
 alert(this.id);
}, false); 

//正确的写法
var btn = document.getElementById("myBtn");
var handler = function(){
 alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！

IE事件处理程序

IE特立独行,有两个相似的方法attachEvent()和detachEvent()与DOM 0级事件处理程序类型.

//attachEvent在全局作用域中运行
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
 alert(this === window); //true
});

attachEvent可以添加多个,但是执行顺序是相反的,最后添加的会最先执行

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
 alert("Clicked");
});
btn.attachEvent("onclick", function(){
 alert("Hello world!");
});

detachEvent移除事件处理程序,匿名函数不能移除

var btn = document.getElementById("myBtn");
var handler = function(){
 alert("Clicked");
};
btn.attachEvent("onclick", handler);
//这里省略了其他代码
btn.detachEvent("onclick", handler);

兼容写法

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

addHandler()和 removeHandler()没有考虑到所有的浏览器问题,例如在 IE 中的作用域问题.不过,使用它们添加和移除事件处理程序还是足够了.此外还要注意,DOM0 级对每个事件只支持一个事件处理程序.好在,只支持 DOM0 级的浏览器已经没有那么多了.

事件