JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节
来源:互联网 发布:人工智能龙头股有哪些 编辑:程序博客网 时间:2024/05/22 11:31
我们都知道,dom事件处理程序有两种类型:DOM0级和DOM2级,其中DOM0级在文档中调用onclick事件,这种方法比较繁琐,DOM2级使用addEventListener()和removeEventListener()两个方法处理事件,这种方法比较常见,但是,ie人家牛逼,IE中也有类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的连个参数:事件处理程序,处理函数。 废话不多说,直接上代码:
一:attachEvent()用法。
attachEvent()添加事件处理程序都会被添加到冒泡阶段:
例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="divIe">你可以改变世界!</div></body><script type="text/javascript"> var divIe = document.getElementById('div3Ie'); divIe.attachEvent('onclick',function(){ console.log('bangbang'); });</script></html>
二:attachEvent()和DOM0级和DOM2级方法的区别在哪?
- attachEvent()里面的第一个参数是onclick而不是和addEventListener()中的click一样;
- attachEvent()使用和使用DOM0级的区别主要在于事件处理程序的作用域。在使用DOM0级方法情况下,事件处理程序会在其所属的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此这里面的this相当于window。不过上面的程序我用Opera和chrome都不能测试成功,必须是ie浏览器才可以使用。例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="btn">你可以改变世界!</div></body><script type="text/javascript"> var btn = document.getElementById('btn'); console.log(window.attachEvent); console.log(window.detachEvent); console.log(window.addEventListener); btn.attachEvent('onclick',function(){ console.log('bangbang'); console.log(this); //window });</script></html>
- 另外,还有一点不同的是,使用attachEvent()绑定多个事件的时候,和addEventListener()以相反的顺序触发:例如:
在上面的程序中加入:
btn.attachEvent('onclick',function(){ console.log('yanniu'); });
然后执行程序后,先输出’yanniu’,然后再输出’bangbang’;
4. 和removeEventListener的作用一样,deachEvent()也可以移除attachEvent()添加的事件:
function handler(){ alert('删除'); } btn.attachEvent('onclick',handler); btn.detachEvent('onclick',handler);
1 0
- JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节
- javascript attachEvent和addEventListener 使用方法
- javascript attachEvent和addEventListener 使用方法
- addEventListener()、attachEvent()和removeEventListener()、detachEvent()的区别?
- javascript中的attachEvent和addEvntlistener的使用方法
- javascript attachEvent 和 addEventListener 使用方法 区别
- attachEvent、addEventListener、detachEvent、removeEventListener
- attachEvent、addEventListener、detachEvent、removeEventListener
- attachEvent、addEventListener、detachEvent、removeEventListener
- js 添加_删除事件 addEventListener/removeEventListener和attachEvent/detachEvent
- attachEvent和addEventListener使用方法
- attachEvent和addEventListener 使用方法
- javascript中addEventListener和attachEvent区别
- javascript中attachEvent、addEventListener用法和区别
- addEventListener()和attachEvent()跨浏览器的兼容性处理 — 第13.2.5节
- JS之事件绑定(addEventListener、removeEventListener、attachEvent、detachEvent的用法和区别)
- JS:attachEvent和addEventListener 使用方法
- JS:attachEvent和addEventListener 使用方法
- axis
- ubuntu下CMake学习
- Jungle Roads(POJ1251)(primer)
- VS2013中普通C++项目添加属性表后出错解决方法
- synchronized知识点小结
- JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节
- NOIP2015DAY2T2【字串】
- 437. Path Sum III
- Java开发工具_Eclipse快捷键大全
- 大数据Spark “蘑菇云”行动补充内容第69课: Spark SQL案例之分析电影评分系统.
- Java序列化的中级认识
- Unity发布GooglePlay游戏的一些注意事项
- Python 虚拟机
- jquery配合.NET实现点击指定绑定数据并且能够一键下载