博文
跨浏览器的事件处理程序分析
|||
JavaScript与HTML的交互是通过事件（event）实现的，事件的发生可通过监听器（monitor）监听事件实现。它的这种模式在传统软件工程的设计模式中属于观察员（Observer）模式，用来支持页面行为和页面之间的松耦合。
1、基础概念
1.1 事件流
事件流描述的是页面中各个节点接收事件的先后顺序，主要包括IE提出的事件冒泡（event bubbling）流和NetScape Communicator提出的的事件捕获（event capturing）流。
1.1.1 事件冒泡
事件冒泡，即事件首先在具体的元素（例如div元素）上发生，然后该事件沿着DOM树逐级向上传播（在每一级节点上都会发生），直至传播到不具体的节点（例如document对象或者window对象）。
1.1.2 事件捕获
事件捕获与事件冒泡完全相反，它是先从不具体的节点预先捕获到事件，然后该事件沿着DOM树依次向下，直到传到具体的元素上。
出于老版本浏览器不支持事件捕获的考虑，建议使用事件冒泡。
1.2 事件处理程序
事件处理程序，也被称为事件监听器，是响应某个事件的函数，一般以“on”开头，例如onClick、onload等事件处理程序。为事件绑定处理程序的方式包括以下几种。
1.2.1 HTML事件处理程序
HTML事件处理程序，即通过在HTML页面中为事件指定事件处理程序。但是由于HTML页面与JavaScript代码的紧耦合，导致许多开发人员摒弃了这种方式。
1.2.2 DOM级事件处理程序
为了解决HTML页面和事件处理程序的紧耦合问题，提出了一种通过JavaScript指定事件处理程序的方式，即将一个函数赋值给一个事件处理程序属性（每个元素包括window和document都有自己的事件处理属性，这些属性一般全部小写）。这种方式由于具备简单、跨浏览器的优势而备受所有Web浏览器开发商的青睐。例如：
var msg = document.getElementById("showMessage");
msg.onclick = function(){
alert("Hello World!");
}
这种方式首先获得元素对象（例如一个button）的引用，然后为它指定了onclick事件处理程序。但要注意，（1）这段代码一定要位于这个button的前面，否则不会响应事件；（2）这种方式类似于给元素对象定义一个onclick方法，事件处理程序是在元素的作用域中运行，因此这里的this引用的是当前元素对象，而非event对象。例如：
var msg = document.getElementById("showMessage");
msg.onclick = function(){
alert(this.id);//tips:showMessage
}
（3）删除事件处理程序，只需执行btn.onclick = null即可。
1.2.3 addEventListener()和removeEventListener()
在“DOM2级事件”中定义了所有DOM元素都包含的两个方法：addEventListener()和removeEventListener()。例如：
var msg = document.getElementById("showMessage");
var handler = function() {
alert(this.id); //tips:showMessage
}
msg.addEventListener("click", handler, false);
其中的三个参数：
（1） 要处理的事件名，这里是为id为showMessage的按钮添加onclick的事件处理程序。
（2） 事件处理程序的函数。
（3） true/false。true表示在捕获DOM事件流捕获阶段调用事件处理函数；false表示在冒泡阶段调用事件处理函数。为了最大程度地兼容各种浏览器，建议在事件流冒泡阶段注册事件处理程序。
addEventListener()还支持添加多个事件处理程序，事件按照绑定时的先后顺序触发。但从浏览器的版本角度进行考虑，目前除Firefox、Safari、Chrome和Opera支持这两种方法之外，IE浏览器只有IE9支持，IE8及以下版本均不支持。
1.2.4 IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()方法。例如：
var msg = document.getElementById("showMessage");
var handler = function() {
alert(this == window);
}
msg.attachEvent("onclick", handler);
其中的两个参数：
（1） 事件处理程序名称，这里的参数为“onclick”，而非“click”；
（2） 事件处理程序函数。这里的this区别于DOM级事件处理程序，这里的this等于window，这是因为attachEvent()方法会在全局作用域中运行。在编写跨浏览器时要牢记这一点。
由于IE8及更早版本只支持事件冒泡，所有通过attachEvent()给元素绑定事件的时机为冒泡阶段。另外，该方法与addEventListener()类似，支持绑定多个事件处理程序。目前支持的浏览器有IE和Opera。
1.2.5 跨浏览器的事件处理程序
综合考虑到各种浏览器的特性，实现跨浏览器的事件处理程序。
https://blog.sciencenet.cn/blog-448935-608486.html
上一篇：数据库之LEFT JOIN
下一篇：跨浏览器的事件及事件对象类型
