attactEvent与addEventListener

区别在与:

　　attactEvent不支持Mozilla，addEventListener用于Mozilla。

　　attactEvent方法，按钮为onclick；

　　addEventListener方法，按钮为click；

　　两者都可对执行的优先级不一样的事件进行操作。

　　例如：

　　　　document.getElementById("btn").οnclick=method1;

　　　　document.getElementById("btn").οnclick=method2;

　　　　document.getElementById("btn").οnclick=method3;

　　　　这样子的写法，method3覆盖了method1与method2，因此浏览器只会执行method3。

　　　　为了让三个事件都顺利运行，就需要使用attactEvent(event,function)的写法。

　　　　例：

　　　　　　var aBtn=document.getElementById("btn");

　　　　　　aBtn.attactElent("onclick",method1);

　　　　　　aBtn.attactEvent("onclick",method2);

　　　　　　aBtn.attactEvent("onclick",method3);

　　　　用这样的写法，可以使三个事件顺利运行，但是执行的顺序是method3>method2>method1;

　　　　而且如果是Mozilla系列，则不支持此方法，需要用到addEventListener(type,listener,useCaptrue);

　　　　写法如下：

　　　　　　var aBtn=document.getElementById("btn");

　　　　　　aBtn.addEventListener("click",method1,false);

　　　　　　aBtn.addEventListener("click",method2,false);

　　　　　　aBtn.addEventListener("click",method3,false);

　　　　这种写法可以顺利的在Mozilla运行，运行的顺序为method1>method2>method3;

　　　　实例：

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="height:200px;width:200px;background-color:skyblue" id="div"></div>
<script>
var method1=function(){
alert(1)
},
method2=function(){
alert(2)
},
method3=function(){
alert(3)
},
aDiv=document.getElementById("div")
if(aDiv.addEventListener){
aDiv.addEventListener("click",method1,false);
aDiv.addEventListener("click",method2,false);
aDiv.addEventListener("click",method3,false)
}else if(aDiv.attachEvent){
aDiv.attachEvent("onclick",method1);
aDiv.attachEvent("onclick",method2);
aDiv.attachEvent("onclick",method3);
}
</script>
</body>
</html>

移除事件为：

detachEvent(event,function);

removeEventListener(type,listener)

转载于:https://www.cnblogs.com/lovemylove/p/4994720.html

attactEvent与addEventListener相关推荐

addEventListener()与removeEventListener()
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...
常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function...
这是因为选择器没有正确选择元素对象 document.getElementsByClassName(...)捕捉到的是该类名元素的数组正确的访问方式应该是: document.getElements ...
javascript addEventListener()
为什么80%的码农都做不了架构师?>>> element.addEventListener(event,function,useCapture) event:必须字符串指定 ...
jquery对事件的监听方法addEventListener()
在这个点击事件的监听里,我们可以获取鼠标的点击坐标 (function($){window.addEventListener("click",function(evt){for(v ...
Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题参考文章: (1)原生js的attachEvent和addEventLis ...
关于addEventListener和attachEvent的初步探讨
关于addEventListener和attachEvent IE不对应addEventListener,只能使用attachEvent,所以首先需要判断你的浏览器对应的是哪个事件函数 if (win ...
[FLASH_AS]Flash as3 addEventListener事件监听传递参数
var event_param:String = "Hello; 对象元件.addEventListener(MouseEvent.CLICK,function (e:MouseEvent) ...
JS:attachEvent和addEventListener方法
<SCRIPT LANGUAGE="JavaScript"> <!-- /**************************************** ...

attactEvent与addEventListener

attactEvent与addEventListener相关推荐

最新文章

热门文章