摘要:从开始已经支持事件捕获了。删除通过级方法指定的事件处理程序,只要将事件处理程序的属性值设置为即可。如果是,则可以使用这个方法取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用取消事件的进一步捕获或冒泡。
从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的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛...
摘要:从数学博士到阿里云工程师,夏分一直学以致用。入职后的第个月,夏分接手了第一个项目,用工业大脑帮一家风电企业提前预测风电机组故障。一个万千瓦的风电场,平均每年维护费用高达万元,还会以平均的速率逐年递增。 从数学博士到阿里云工程师,夏分一直学以致用。加入阿里云接手的第一个ET工业大脑项目,因为数据传输问题丢失大量数据,导致机器误判拉响警报,这让他意识到自己不能只坐在电脑前做码农,也要下到车...
摘要:对微信小程序进行全局配置,决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具 新建一个quick start项目,了解代码结构,...
摘要:传统的网页编程采用的三剑客来实现,在微信小程序中同样有三剑客。观察者模式不难实现,重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型,微信小程序中自然也有。 本文由作者邹永胜授权网易云社区发布。 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...
阅读 3152·2021-09-30 09:47
阅读 2003·2021-09-22 16:04
阅读 2274·2021-09-22 15:44
阅读 2533·2021-08-25 09:38
阅读 540·2019-08-26 13:23
阅读 1221·2019-08-26 12:20
阅读 2807·2019-08-26 11:59
阅读 1077·2019-08-23 18:40