js原生attachEvent与addEventListener的用法

现在jquery比较流行,所以我们用得比较多的是jquery,很少用原生的js. 不过还是要了解一下滴。

代码如下:

<a id="btnClick" href="javascript:void(0);">点击我</a>

如果我们要给该按钮的点击按钮绑定三个函数,对js了解比较少的人容易写成这样:

<script type="text/javascript">
var ele=document.getElementById("test");
ele.click=method1;
ele.click=method2;
ele.click=method3;
</script>

这是错误的,因为点击事件只会执行函数3。所以我们需要用到attachEvent和addEventListener事件,attachEvent只适用于ie浏览器,而addEventListener只适用于火狐

浏览器。综上正确的写法如下:

<script type="text/javascript">
var ele=document.getElementById("test");
if(window.attachEvent){
    ele.attachEvent("onclick",function(){alert("你点击了我");})
    ele.attachEvent("onclick",function(){alert("你又点击了我");})
    ele.attachEvent("onclick",function(){alert("你又又点击了我");})
}else{
    ele.addEventListener("click",function(){alert("你点击了我");})
    ele.addEventListener("click",function(){alert("你又点击了我");})
    ele.addEventListener("click",function(){alert("你又又点击了我");})
}

</script>

细心的人会发现,用attachEvent时我们用的是onclick,用addEventListener时用的是click.

同时,移除绑定的函数用到的分别是deattachEvent和removeEventListener。

时间: 2024-08-11 05:36:09

js原生attachEvent与addEventListener的用法的相关文章

attachEvent 和 addEventListener 的用法

http://www.oschina.net/question/54100_25614 addEventListener中的第三个参数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). 点击这里 attachEvent 和 addEventListener 的用法

js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 //object.attachEvent(eve

JS事件监听 JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListener方法    按钮click 两者使用的原理:可对执行的优先级不一样的事件进行操作:attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Js代码 document.getElementByI

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

js原生添加事件的方式

js原生添加事件的方式: 1. 直接在html标签上添加 <div onclick="alert('div')">div</div> 2. 用dom的on...方法添加 document.getElementById('div').onclick = function () {alert('div')}; 3. 用addEventListener或attachEvent添加 document.getElementById('div').addEventListe

attachEvent与addEventlistener兼容性

关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题 By odacash   at 2014-07-01   29 阅读   0 回复   0.0 希赛币 请点击下面回答中的"采纳为答案"按钮,选择贡献(希赛币)比率后,点击"确认结算"按钮.       合计0人 0%   关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attach

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

js原生捕鱼达人(一)

捕鱼达人的游戏大家都很熟悉吧,接下来的两三天,我会将整个游戏的原生js写法详细的写出来,整个游戏应用了面向对象的写法:创建构造函数,在构造函数上面添加对象的属性,然后在构造函数的原型上添加方法,当然这个程序使用了canvas来绘制,每一步的我都已经分别写出来,详细的步骤我在写代码的过程中都已经标注了出来. 下面是捕鱼达人的素材库: 1>加载资源 <style> *{ padding: 0; margin: 0; } body{ background:#000; text-align:ce

attachEvent与addEventListener的区别 真实例子

近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普及一下基本知识: attachEvent与addEventListener的作用:为某一事件附加其它的处理事件. 网上普遍都是说attachEvent用于非Mozilla系列,addEventListener用于Mozilla系列. (Mozilla系列在浏览器而言,即指火狐浏览器,本人认为也可以指支持w3c标准的系列浏览器) 理论上是这么说,还是得自己动手试一试! 结合查阅资料写了以下代码进行测