注意: attachEvent仅支持IE(edge也不支持),在IE8中,先绑定的后执行,但在IE9以及后续版本中,先绑定的先执行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js测试</title> </head> <body> <div id="outer"> 外层DIV <div id="inner">内层DIV</div> </div> <script> var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); /** * addEventListener 为Dom元素绑定事件 * 参数1:事件名称(以on开头) * 参数2:事件执行的函数 * 说明: * DOM2级事件规定的事件流包括三个阶段。 * 第一个阶段是事件捕获阶段,从外往内传递; * 第二个阶段是处于目标阶段,这个阶段中参数3设置false或true都一样,按照绑定先后顺序执行。 * 第三个阶段是冒泡阶段,从内往外传递。 * 注意: * IE8以及早期版本只支持事件冒泡。IE8中attachEvent先绑定的后执行,IE9以及更新版中先绑定的先执行。 * 以下的注释都针对点击一次“内层DIV” */ outer.attachEvent('onclick', function(event){ console.log('outer clicked! 004'); // 最后执行,因为最先绑定且为最外层 }); outer.attachEvent('onclick', function(event){ console.log('outer clicked! 003'); // 第三执行,因为最外层第二个绑定 }); inner.attachEvent('onclick', function(event){ console.log('inner clicked! 002'); // 第2执行,因为目标元素而且倒数第二绑定 }); inner.attachEvent('onclick', function(event){ console.log('inner clicked! 001'); // 第1执行,因为是目标,且最后绑定 }); </script> </body> </html>
点击“内层DIV”执行结果为:
IE9中则为:
相关推荐
IE11没有window.attachEvent方法处理方法,文档中有详细说明
特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的... Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能在元素的冒泡阶段。 stopPropagatin()方法用于阻止事件的传播,如果设
这里举两个例子: 代码如下: Element.prototype.addEventListener = function(evtType, evtHandler) { return this.attachEvent(‘on’ + evtType, evtHandler); } Object.defineProperty(Event.prototype, ‘target...
attachEvent Retrofill 释放旧记忆并安装attachEvent改造! 随着 IE 的消失和 Edge 的出现,微软将删除所有并完全坚持 Web 标准。 这使得所有addEvent包装器功能完全过时。 不要让这种情况发生并立即安装attachEvent...
window对象的attachEvent方法只在IE浏览器中有效,其它浏览器不支持这个方法,所以报错。 self.attachevent is not a function其实就是以前的代码, 没有做chrome、firefox浏览器兼容导致。 self.attachEvent(...
attachEvent的使用方法与传递参数[IE|firefox]
02-attachEvent.html
本文实例讲述了javascript中...如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 btn1Obj.attachEvent(onc
今天小弄了一下JS事件,主要说一下FF和IE兼容的问题
由于IE只支持事件冒泡,所以同大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,即默认为”false” 这样可以最大限度地兼容各种浏览器。 最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加...
最近在 司徒正美js 全世界最短的IE浏览器判断代码 一文,看到只有6byte的判断ie与非ie的...就是根据ie支持window.attachEvent添加侦听事件,非ie用window.addEventListener添加侦听事件来判断的。navigator.userAgen
1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button-...
事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意:事件名 包含on前缀 两...
写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前者是Firefox chrome,后者只是存在于IE系列中
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌(废话) IE浏览器里,this指向问题。 直接上代码吧! 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent...
attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn...
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法