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,一经查实,立即删除!

相关文章

java多线程总结一:线程的两种创建方式及优劣比较

1、通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法。在run()方法中加入具体的任务代码或处理逻辑。 (2).创建Runnable接口实现类的对象。 (3).创建一个Thread类的对象,需要封装前面Runnable接口实现类的对象。&…

如果删除github上项目的文件

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

在WildFly和OpenShift上的WebSocket聊天

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

recv, recvfrom, recvmsg

recv,recvfrom,recvmsg函数用于从套接字接收信息。 ssize_t recv (int s, void *buf, size_t len, int flags);ssize_t recvfrom (int s, void * restrict buf, size_t len, int flags, struct sockaddr * restrict from, socklen_t * restrict fromlen);ssize_t recvmsg (int…

[解决]电信彩信网关开发错误-SOAP_VERSIONMISMATCH

上一个文章&#xff1a;[求救]电信彩信网关开发错误&#xff0d;SOAP_VERSIONMISMATCH 说的问题<messageId>SVC0001</messageId> <text>SOAP_VERSIONMISMATCH</text> 已经解决&#xff0c;主要是查看了网上的一个同学的帖子&#xff0c;非常感谢。再来…

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

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

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

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

魔戒1

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

得到python默认的帮助文档

python的help文档很好&#xff0c;就是有时候help一下给出好几页来&#xff0c;甚至有些帮助根本就看不到了(我想应该有其他方法可以解决&#xff0c;只是我不想去查了)&#xff0c;因为这个可以通过一个很简单的python脚本搞定。这里举例为证&#xff0c;比如我想得到Tkinter的…

如何在Java中将图像上传到DropBox

本教程介绍了如何将图像上传到放置框并获取上传图像的公共URL。 首先&#xff0c;我们必须使用应用程序控制台创建一个DropBox API应用程序 。 创建应用程序后&#xff0c;您可以在应用程序属性中获取应用程序密钥和秘密密钥。 现在在您的pom文件中添加以下依赖项。 <dep…

css3动画整理

css3动画主要常用的属性有 变形&#xff08;transform&#xff09;&#xff0c;转换&#xff08;transition&#xff09;&#xff0c;动画&#xff08;animation&#xff09;三种。 变形&#xff08;transform&#xff09;主要有以下几种方式&#xff1a; 旋转rotate&#xff1…

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>…

程序员成熟的标志

程序员在经历了若干年编程工作之后&#xff0c;很想知道自己水平到底如何&#xff1f;自己是否已经成为成熟的程序员&#xff1f;虽然程序员会对自己有一个自我评价&#xff0c;但是&#xff0c;自己的评价和社会的评价、专业的评价会有差异&#xff0c;所以程序员自己并不能肯…

Spring Data JPA教程:简介

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

深入了解React组件重新渲染的条件和生命周期

React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true&#xff0c;那么当前组件会rerender组件的props中的任一属性的值有变化(即使这个任一属性的值是对象&#xff0c;变化的仅仅是该对象中的某属性的值&#xff0c;此刻也算…

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

有几个同事和朋友要生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…

Hystrix中的批量(折叠)请求

Hystrix具有折叠&#xff08;或批处理&#xff09;请求的高级功能。 如果两个或多个命令同时运行相似的请求&#xff0c;Hystrix可以将它们组合在一起&#xff0c;运行一个批处理请求&#xff0c;并将拆分结果分派回所有命令。 首先让我们看看Hystrix如何工作而不会崩溃。 假设…

C#繁简转换

//1.using System.Runtime.InteropServices; //2.import kernel32.dll [DllImport("kernel32.dll",EntryPoint "LCMapStringA")]    public static extern int LCMapString(int Locale,int dwMapFlags,byte[] lpSrcStr,int cchSrc,byte[] lpDestStr,…

css笔记 2

定义一个类选择器.center {text-align: center} h1 有 center 类。这意味将遵守 ".center" 选择器中的规则。<h1 class"center">This heading will be center-aligned</h1> 类名的第一个字符不能使用数字&#xff01; 派生选择器td.fancy {…