javaScript跨浏览器事件处理程序

terasum 发布于2019-08-21 10:38 / 2518人阅读

摘要：在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具。上面的中事件的执行都发生了目标阶段事件对象的属性用来表示事件处理发生在事件流哪个阶段。

最近在阅读javascript高级程序设计，事件这一块还是有很多东西要学的，就把一些思考和总结记录下。
在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具。

(function(){
    var EU = {};
    //...
    //在这里添加一些通用的事件处理方法
    //...
    window.EventUtil = EU;
})();

事件处理程序

事件的绑定主要为IE8以下浏览器做兼容处理：

IE8以下只支持事件冒泡
IE事件处理使用attachEvent detachEvent

绑定事件

EU.addHandler = function(element,type,handler){
    //DOM2级事件处理，IE9也支持
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加"on"
        //IE9也可以这样绑定
        element.attachEvent("on" + type,handler);
    }
    //DOM0级事件处理步，事件流也是冒泡
    else{
        element["on" + type] = handler;
    }
};

取消绑定事件

和绑定事件的处理基本一致，有一个注意点：

传入的handler必须与绑定事件时传入的相同（指向同一个函数）

EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent("on" + type,handler);
    }
    else{
        //属性置空就可以
        element["on" + type] = null;
    }
};

事件对象

注意点：

IE下event是全局对象，通过window.event取得

EU.getEvent = function(event){
    return event || window.event;
}

事件的目标

注意点:

IE下通过attachEvent绑定事件，内部this并非触发事件的DOM,而是window;
通过目标对象来获取DOM节点，IE下是srcElement属性，等同于其他浏览器的target属性

EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻止默认事件

EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下处理
    else{
        event.returnValue = false; //默认为true
    }
}

关于事件默认行为

阻止事件传播

EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下处理
    else{
        event.cancelBubble = true;//默认为false，注意区分于returnValue
    }
}

注意点：

阻止的是DOM层级间的事件传播

比如：对于一个DOM元素，同时绑定捕获事件与冒泡事件，如果在捕获阶段使用stopPropagation,不会阻断冒泡事件的执行；~~(事件捕获早于事件冒泡)~~

Demo地址：http://jsfiddle.net/0sfck15b/

如果对子元素和父元素以冒泡形式都绑定"click"事件，在子元素的事件处理中使用stopPropagation阻止事件传播,父元素绑定的click事件不会执行。
Demo地址：http://jsfiddle.net/av6yebsw/

上面的划掉的地方理解有误，更正下。上面的demo中事件的执行都发生了目标阶段,事件对象event的eventPhase属性用来表示事件处理发生在事件流哪个阶段。
对应关系 1：捕获阶段,2: 处于目标,3: 冒泡阶段
还有一点:

目标阶段并不一定先发生捕获阶段所绑定的事件,先绑定先执行

demo演示： http://jsfiddle.net/h52xwkrh/
但不变的是对同一个DOM无论在捕获阶段还是在冒泡阶段使用ev.preventDefault()，都不会阻止另一个事件执行

欢迎讨论交流！如果文章对你有帮助，点下面的推荐鼓励下呗(๑>؂<๑）

云服务器 GPU云服务器事件处理程序 js事件处理程序 Web跨浏览器 js 跨浏览器存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85917.html

js中DOM事件探究

摘要：提出的事件流是事件冒泡流，提出的事件流是事件捕获流。事件冒泡流事件开始时，由最具体的元素文档中嵌套层次最深的哪个节点接收，逐级上传到最不具体的元素文档。事件处理程序，级事件处理程序，级事件处理程序，事件处理程序。事件纲要理解事件流使用事件处理程序不同的事件类型 javascript和html的交互是通过事件实现的。事件就是文档或浏览器窗口发生的一些特定交互瞬间。可以使用侦...

icattlecoder 2019-08-20 15:34 评论0 收藏0
跨浏览器的事件处理程序实现总结

摘要：本文章需要一些前置知识事件基础知识对象详解围绕着如何更好地实现一个跨浏览器的事件处理小型库展开讨论。处理垃圾回收过滤触发或删除一些处理程序解绑特定类型的所有事件克隆事件处理程序依照这样的一个思路，我们来一步步实现这样一个模块。本文章需要一些前置知识事件基础知识 event对象详解围绕着如何更好地实现一个跨浏览器的事件处理小型库展开讨论。 1. 初步实现在《JavaScrip...

CHENGKANG 2019-08-22 10:47 评论0 收藏0
Javascript之事件(一)

摘要：事件流事件流描述的是页面接收事件的顺序的事件流是冒泡流而的事件流是事件捕获流事件冒泡是指事件开始时由最具体的元素，然后向上传播到较为不具体的节点所有现代浏览器都支持事件冒泡则将事件一直冒泡到对象事件捕获是不太具体的节点应该更早接收到事件而具事件流事件流描述的是页面接收事件的顺序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕获流. 事件冒泡是指...

?xiaoxiao, 2019-08-22 10:58 评论0 收藏0
JavaScript事件探秘

摘要：一事件流事件流描述的是从页面中接受事件的顺序。级事件处理程序级事件定义了两个方法用于处理指定和删除事件处理程序的操作和。第二个方法是，它返回事件的目标。第三个方法是，用于取消事件的默认行为。首先尝试使用方法阻止事件流，否则就使用属性。一、事件流事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流 1、事件冒泡事件冒泡，即事件最开始...

shuibo 2019-08-19 17:47 评论0 收藏0