attachEvent和addEventListener

attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写

obj.οnclick=method

相同点:

  它们都是DOM对象的方法,可以实现一种事件绑定多个事件处理函数。

复制代码
obj = document.getElementById("testdiv");
obj.onclick=function(){alert('1');};
obj.onclick=function(){alert('2');};
obj.onclick=function(){alert('3');};
// 当使用上边三句话进行事件绑定的时候,很明显当点击ID为testdiv对象时,只能执行
//最后一句脚本。因为onclick作为一个事件处理对象,只能赋一个值,后面的赋值自动覆
//盖前面的
复制代码

使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});//点击时,三个方法都会执行
obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert(2');},false);
obj.addEventListener('click',function(){{alert('3');},false);//点击时,三个方法都会执行

不同点:

  1.attachEvent是IE9之前特有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

  2.多次绑定后执行的顺序是不一样的,attachEvent在ie9之前的版本是后绑定先执行,ie9以及以后的版本是先绑定先执行,且两者都支持,addEventListener是先绑定先执行

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});
//执行顺序是alert(3),alert(2),alert(1);
obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert('2');},false);
obj.addEventListener('click',function(){{alert('3');},false);
//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

  3.绑定时间时,attachEvent必须带on,如onclick,onmouseover等,而addEventListener不能带on,如click,mouseover。这个区别在以上代码中可见。

  4.attachEvent仅需要传递两个参数,而addEventListener需要传递三个参数,这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目 标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。 

为了解决浏览器的兼容性可以封装成addEvent方法:

复制代码
function addEvent(elm, evType, fn, useCapture) 
{if (elm.addEventListener) {// W3C标准elm.addEventListener(evType, fn, useCapture);return true;}else if (elm.attachEvent) {//IEvar r = elm.attachEvent(‘on‘   evType, fn);//IE5 return r;}else {elm['on'   evType] = fn;//DOM事件}
}
复制代码
复制代码
        function addEvent(element, type, handler) {//为每一个事件处理函数分派一个唯一的IDif (!handler.$$guid) handler.$$guid = addEvent.guid  ;//为元素的事件类型创建一个哈希表if (!element.events) element.events = {};//为每一个"元素/事件"对创建一个事件处理程序的哈希表var handlers = element.events[type];if (!handlers) {handlers = element.events[type] = {};//存储存在的事件处理函数(如果有)if (element["on"   type]) {handlers[0] = element["on"   type];}}//将事件处理函数存入哈希表handlers[handler.$$guid] = handler;//指派一个全局的事件处理函数来做所有的工作element["on"   type] = handleEvent;};//用来创建唯一的ID的计数器addEvent.guid = 1;function removeEvent(element, type, handler) {//从哈希表中删除事件处理函数if (element.events && element.events[type]) {delete element.events[type][handler.$$guid];}};function handleEvent(event) {var returnValue = true;//抓获事件对象(IE使用全局事件对象)event = event || fixEvent(window.event);//取得事件处理函数的哈希表的引用var handlers = this.events[event.type];//执行每一个处理函数for (var i in handlers) {this.$$handleEvent = handlers[i];if (this.$$handleEvent(event) === false) {returnValue = false;}}return returnValue;};//为IE的事件对象添加一些“缺失的”函数function fixEvent(event) {//添加标准的W3C方法event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;};fixEvent.preventDefault = function () {this.returnValue = false;};fixEvent.stopPropagation = function () {this.cancelBubble = true;};
复制代码
复制代码
var addEvent = (function () {if (document.addEventListener) {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i  ) {addEvent(el[i], type, fn);}} else {el.addEventListener(type, fn, false);}};} else {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i  ) {addEvent(el[i], type, fn);}} else {el.attachEvent('on'   type, function () {return fn.call(el, window.event);});}};}})();
复制代码

以上内容是在学习了该博文后经过修改转载的https://www.cnblogs.com/dacuotecuo/p/3510823.html

版权说明:本文版权归作者和博客园共有,欢迎转载,但必须保留此段声明,且在文章页面中给出原文连接。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如果删除github上项目的文件

1. 你要有前面一章的开发平台和github插件,下面就是基于前面来做的。 如何删掉你github上的文件呢?想必你的电脑有一个下载的git工具了,如果还是没有的话,请用npm下载一个git。这是我已经下载好的。 2. 然后打开这个git&#xff…

在WildFly和OpenShift上的WebSocket聊天

聊天是解释WebSocket的最典型示例之一。 它是一个相当常用的界面,可以很容易地解释WebSocket的基本概念。 当然,Java EE 7 WebSocket也有一个, 在这里可用 ! 您可以使用以下步骤在WildFly上轻松运行它: curl -O http:…

Ubuntu20.04纯命令配置PCL(点云库)

Ubuntu20.04纯命令配置PCL(点云库) 最近在学习点云库(PCL)的使用,第一步就是在自己的电脑安装配置PCL。 首先,对于ubuntu 16.04以上版本,可以直接使用命令进行安装,新建好一个文件夹…

css html应用实例1:滑动门技术的简单实现

关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出…

魔戒1

转载于:https://www.cnblogs.com/moonlightpeng/p/11240880.html

jQuery应用实例2:简单动画

效果&#xff1a; 代码&#xff1a; 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns"http://www.w3.org/1999/xhtml">3 <head>…

Spring Data JPA教程:简介

创建使用Java Persistence API的存储库是一个繁琐的过程&#xff0c;需要大量时间&#xff0c;并且需要大量样板代码。 通过执行以下步骤&#xff0c;我们可以消除一些样板代码&#xff1a; 创建一个抽象的基础存储库类&#xff0c;该类为实体提供CRUD操作。 创建扩展抽象基础…

对怀孕的人有害的食物。。。朋友们记住咯!(欢迎转载)

有几个同事和朋友要生BB啦&#xff0c;好东东&#xff0c;转给你们提前学习一下~ 容易流产食物&#xff1a; 1、螃蟹&#xff1a;它味道鲜美&#xff0c;但其性寒凉&#xff0c;有活血祛瘀之功&#xff0c;故对孕妇不利&#xff0c;尤其是蟹爪&#xff0c;有明显的堕胎作用。 2…

Vss服务端用户存在,但客户端登陆不进去

打开客户端Vss提示“Cannot find SS.INI file for user userName”,这个错误是找不到用户userName的SS.INI文件。 解决办法 在服务器上找到Vss共享的文件夹&#xff0c;打开此文件夹下的users文件夹&#xff0c;然后找到userName文件夹打开后&#xff1a; 如果没有SS.INI文件&a…

Red Hat Enterprise 5 server 上安装 memcached 的问题记录

国内私募机构九鼎控股打造APP&#xff0c;来就送 20元现金领取地址&#xff1a;http://jdb.jiudingcapital.com/phone.html内部邀请码&#xff1a;C8E245J &#xff08;不写邀请码&#xff0c;没有现金送&#xff09;国内私募机构九鼎控股打造&#xff0c;九鼎投资是在全国股份…

Java扩展机制可加载所有JAR

Java扩展机制在Java教程中被描述为“一种标准的&#xff0c;可伸缩的方式&#xff0c;以使自定义API可供Java平台上运行的所有应用程序使用。” 如了解扩展类加载中所述 &#xff0c;“扩展框架利用类加载委托机制”&#xff0c;其中扩展类在rt.jar &#xff08;和相关的JAR&am…

C++的文艺复兴: Why C++? 王者归来

因为又有人叫我去Quora的C2C站去回答问题了&#xff0c;这回是 关于 《2012 不宜进入的三个技术点ActionScript&#xff0c;Thread 和 C&#xff0c; C争议的争议最大。(要我说&#xff0c;.NET比C更需要慎重进入&#xff0c;呵)。我就在这里回复一下这个问题吧。 正好我前段时…

Drools和jBPM KIE A​​pps平台

随着Drools和jBPM&#xff08;KIE&#xff09;6系列出现了一个新的工作台&#xff0c;并有望最终实现用户的可扩展性。 我终于有了一些预告片&#xff0c;以显示此工作原理以及所存储的内容。 确保选择1080p并全屏显示&#xff0c;以达到最佳效果。 &#xff08;点击放大&…

js 严格模式

一、概述 除了正常运行模式&#xff0c;ECMAscript 5添加了第二种运行模式&#xff1a;"严格模式"&#xff08;strict mode&#xff09;。顾名思义&#xff0c;这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的&#xff0c;主要有以下…

模态对话框和全选反选

一、目标 制作一个表格&#xff0c;第一行分别为选择、主机名和端口增加一个按钮&#xff0c;名称为添加点击添加按钮&#xff0c;出现一个半透明的遮罩层&#xff0c;遮罩层中间有个弹出框弹出框中有两个输入框&#xff0c;分别为主机名和端口&#xff0c;还有两个按钮&#…

(转)iReaper for wp7正式发布

原文地址&#xff1a;http://www.cnblogs.com/AlexCheng/archive/2012/02/06/2339968.htmliReaper for windows phone 7今天正式发布了。有windows phone 7手机的朋友可以通过手机在线收听收看webcast中文课程。只要你有网络任何时间任何地点都可以学习微软技术&#xff0c;为您…

Neo4j:Cypher –避免热切

当心渴望的管道 尽管我喜欢Cypher的LOAD CSV命令使它容易地将数据获取到Neo4j中的方法&#xff0c;但它目前打破了最不惊奇的规则&#xff0c;因为它急切地在所有行中加载某些查询&#xff0c;即使是那些使用定期提交的查询。 这是我的同事Michael在第二篇博客文章中指出的&a…

一步步构建大型网站架构 [转]

来源: itivy 原文链接 之前我简单向大家介绍了各个知名大型网站的架构&#xff0c;MySpace的五个里程碑、Flickr的架构、YouTube的架构、PlentyOfFish的架构、WikiPedia的架构。这几个都很典型&#xff0c;我们可以从中获取很多有关网站架构方面的知识&#xff0c;看了之后你…

img、列表和table标签

一、img图片 <body><a href"https://www.fmtxt.com"><img src"images/1.jpg" title"哆啦A梦" style"height: 200px; width: 200px " alt"哆啦A梦"/></a></body>1. 放在 a 标签中&#xff0c…

Java基础笔记之数据类型

一、数据类型 &#xff08;一&#xff09;8种基本数据类型(内置数据类型\C#中为值类型) 字符长度&#xff1a;1byte 8 bit;布尔&#xff1a;可认为是 1byte (8 bit);字符&#xff1a;char&#xff1a;2/16整型:short: 2/16int: 4/32long: 16/64浮点型:float: 8/32double: 16/6…