资讯专栏INFORMATION COLUMN

JS事件总结--试验过的一些小经验

Eastboat / 1444人阅读

摘要:从开始已经支持事件捕获了。删除通过级方法指定的事件处理程序,只要将事件处理程序的属性值设置为即可。如果是,则可以使用这个方法取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用取消事件的进一步捕获或冒泡。

从IE9开始已经支持事件捕获了。
删除通过DOM0级方法指定的事件处理程序,只要将事件处理程序的属性值设置为null即可。
btn.onclick=null;

attachEvent的事件名称是onclick,而addEventListener的事件名称是click

        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert(this.id);
        }        
        btn.addEventListener("click", function (e) {
            alert("我是来测试chrome的");
        }, false);
        btn.attachEvent("onclick", function (e) {
            alert("我是来测试ie的");
        });

上述代码在ie9下居然三个alert都弹出来了,也就是说其实从ie9开始已经走的事件捕获模式了,趋向于dom标准,但是又没有完全废弃自己原先的一套规则,所以两种事件监听它都支持。

        var btn = document.getElementById("btn");     
        btn.attachEvent("onclick", function (e) {
            alert("1");
        });
        btn.attachEvent("onclick", function (e) {
            alert("2");
        });

上述代码在ie8及以下浏览器,弹出alert框的顺序为2,1,但在ie9下弹出alert框的顺序为1,2

        var btn = document.getElementById("btn"); 
        btn.addEventListener("click",function(e){
            alert(1);
        });
        btn.addEventListener("click",function(e){
            alert(2);
        });

事实上DOM2级标准就是按照添加事件的顺序注册的,也就是说在firefox、chrome等浏览器下,弹出alert框的顺序是1,2
在ie下,事件处理程序是在全局作用域下运行的,所以事件处理程序中的this其实就是window(基于上面的经验,ie9开始趋向于DOM标准,我又特意做了测试,结果alert的也是true,我有点晕)

        var btn = document.getElementById("btn"); 
        btn.attachEvent("onclick", function (e) {
            alert(this===window);   //true
        });

在chrome等浏览器下,this指向的是当前对象

        var btn = document.getElementById("btn"); 
       
        btn.addEventListener("click",function(e){
            alert(this===btn);    //true        
        });     

在dom0级别的事件绑定中,ie8及以下浏览器中e输出的为undefined,而chrome下的e输出的对象跟dom2级别中的e完全一样

        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//此处在ie8及以下输出的是undefined而在ie9下输出的是object MouseEvent
        }
        btn.attachEvent("onclick", function (e) {
            console.log(e);//在ie7下输出的是object,在ie8及以下输出的是object Event,而在ie9下输出的是object MSEventObj
        });
        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//在chrome下,此处的e和下面的e输出的都是MouseEvent
        }        
        btn.addEventListener("click", function (e) {
            console.log(e);
        });

看一下chome下输出的e是啥吧

说说这里面有哪些重要的属性/方法吧
bubbles-->Boolean-->事件是否冒泡

cancelable-->Boolean-->是否可以取消事件的默认行为

currentTarget-->Boolean-->事件处理程序当前正在处理事件的那个元素

defaultPrevented-->Boolean-->为true 表示已经调用了preventDefault()

detail-->Integer-->与事件相关的细节信息

eventPhase-->Integer-->调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段

preventDefault()-->Function-->取消事件的默认行为。如果cancelable是true,则可以使用这个方法

stopImmediatePropagation()-->Function-->取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用

stopPropagation()-->Function-->取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法

target-->Element-->事件的目标

type-->String-->被触发的事件的类型

其实我自己也没有搞清楚stopImmediatePropagation和stopPropagation的区别,太多方法

需要理解currentTarget和target的区别及联系,在事件处理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发或者说正在处理事件的那个元素,而target是指当前的目标元素;看看代码具体解释一下:`

    var btn = document.getElementById("btn");
    btn.onclick = function (e) {
        console.log(e.currentTarget == this); // true
        console.log(e.target == this);  // true
    }`
    

对btn按钮触发点击事件,那么e.currentTraget指向了this,e.target也指向了this
而如果是对body绑定事件处理程序,那么e.currentTarget就指向了document.body了,那么e.target 指向与 btn那个元素

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

由于ie下事件处理程序的作用域是在全局使用域下,所以它的event对象也是通过window.event来
一般最简化的跨浏览器的事件通用js如下:

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;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {
        if(typeof event.charCode == "number") {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

哪些事件不能冒泡:在我知晓的范围内有focus、blur、unload、load、mouseEnter、mouseLeave

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

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

相关文章

  • 如何正确学习JavaScript

    摘要:然而,虽然先生对无所不知,被誉为世界的爱因斯坦,但他的语言精粹并不适合初学者学习。即便如此,在后面我还是会建议把当做补充的学习资源。但目前为止,依然是学习编程的好帮手。周正则表达式,对象,事件,阅读权威指南第,,,章。 既然你找到这篇文章来,说明你是真心想学好JavaScript的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛...

    canger 评论0 收藏0
  • 专访第一代车间程序员:ET工业大脑数学博士夏分

    摘要:从数学博士到阿里云工程师,夏分一直学以致用。入职后的第个月,夏分接手了第一个项目,用工业大脑帮一家风电企业提前预测风电机组故障。一个万千瓦的风电场,平均每年维护费用高达万元,还会以平均的速率逐年递增。 从数学博士到阿里云工程师,夏分一直学以致用。加入阿里云接手的第一个ET工业大脑项目,因为数据传输问题丢失大量数据,导致机器误判拉响警报,这让他意识到自己不能只坐在电脑前做码农,也要下到车...

    h9911 评论0 收藏0
  • 微信程序知识总结及案例集锦

    摘要:对微信小程序进行全局配置,决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具 新建一个quick start项目,了解代码结构,...

    sean 评论0 收藏0
  • 微信程序开发中的二三事之网易云信IMSDK DEMO

    摘要:传统的网页编程采用的三剑客来实现,在微信小程序中同样有三剑客。观察者模式不难实现,重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型,微信小程序中自然也有。 本文由作者邹永胜授权网易云社区发布。 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

    weij 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<