【事件绑定的方式】兼容浏览器的事件监听器的设计

最新推荐文章于 2022-03-17 23:44:23 发布

My-Lady

最新推荐文章于 2022-03-17 23:44:23 发布

阅读量401

点赞数

分类专栏： JavaScript 前端面试集锦文章标签：兼容浏览器的事件监听事件捕获事件冒泡

本文链接：https://blog.csdn.net/heshan1992/article/details/77408048

版权

一、兼容浏览器的事件监听器
主要是兼容IE8以前的浏览器，addEvent方法中介绍了三种绑定事件的方式，其中要注意：
（1）在IE的事件绑定方式中，事件处理函数里面的事件对象时挂在window上面的，所以获取event对象时需要利用window.event来获取
（2）addEventListener添加监听器时注意事件的冒泡和事件的捕获，即该方法的第三个参数，事件的冒泡和捕获注意的事项参见下文
（3）利用属性绑定事件只能为同一个类型的事件添加一个事件处理函数，其他的两种方式均可以为同一类型的事件添加多个处理函数。所以属性绑定事件移除时直接赋值null即可。

EventUnit={
    addEvent:function(ele,type,handler){
        if(ele.addEventListener)
        {
            ele.addEventListener(type,handler,false);
        }
        else if(ele.attachEvent)
        {
            ele.attachEvent('on'+type,handler);
        }
        else ele['on'+type]=handler;
    },
    removeEvent:function (ele,type,handler) {
        if(ele.removeEventListener)
            ele.removeEventListener(type,handler);
        else if(ele.dispatchEvent())
            ele.dispatchEvent('on'+type,handler);
        else ele['on'+type]=null;
    },
    stopPropagation:function (ev) {
        if(ev.stopPropagation) ev.stopPropagation();
        else ev.cancelBubble=true;
    },
    preventDefault:function (ev) {
        if(ev.preventDefault)ev.preventDefault();
        else ev.returnValue=false;
    },
    getTarget:function(ev)
    {
       return ev.target||ev.srcElement;
    },
    getEvent:function (ev) {
        var ev=ev||window.event;
        return ev;

    }

}

二、事件的捕获和冒泡
1、基本概念
（1）在IE8+的浏览器以及谷歌等浏览器中事件的发生均有三个阶段：事件的捕获–》事件触发对象–》事件冒泡
（2）事件捕获：
当event.target触发事件时，事件首先会发生在捕获阶段，即从上到下执行阶段，当该元素的祖先元素注册了同类型的事件且事件时发生捕获阶段（addEventListener的第三个参数设置为true，默认情况下所有事件时发生在冒泡阶段的，除了不能发生冒泡的事件）时，会先触发祖先元素的事件函数，一次向下执行。
（3）事件的冒泡则与事件的捕获的发生过程想法，事件的执行过程时从event.target向上冒泡执行的，不能冒泡的事件有：mouseenter/mouseleave/focus/blur/load等
2、事件冒泡捕获的具体情况
在同一个元素上注册同一类型事件的两种处理方式的回调函数，即既有冒泡的回调也有捕获的回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #one{
            width:400px;
            height:400px;
            border:2px solid red;
        }
        #two{

最低0.47元/天解锁文章

My-Lady

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【事件绑定的方式】兼容浏览器的事件监听器的设计

一、兼容浏览器的事件监听器主要是兼容IE8以前的浏览器，addEvent方法中介绍了三种绑定事件的方式，其中要注意：（1）在IE的事件绑定方式中，事件处理函数里面的事件对象时挂在window上面的，所以获取event对象时需要利用window.event来获取（2）addEventListener添加监听器时注意事件的冒泡和事件的捕获，即该方法的第三个参数，事件的冒泡和捕获注意的事项参见
复制链接

扫一扫