跨IE和Chrome浏览器事件处理的解决办法
2015-10-06 10:34
225 查看
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
<script type="text/javascript"> function showMsg(){ alert("Hello"); } var eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=handler; } }, // 删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent('on'+type,handler); }else{ element['on'+type]=null; } } } window.onload=function(){ var btn=document.getElementById('btn'); eventUtil.addHandler(btn,'click',showMsg); }; </script>HTML:
<body> <input type="button" value="按钮" id="btn"> </body>
相关文章推荐
- 《Effective STL》条款1-条款2
- 引用和引用对象的区别
- C#-利用NOPI处理Excel的代码
- 探讨:编译时常量和运行时常量
- Defining BJT Noise Equations
- Android 自定义横向滚动条
- GitHub上README.md教程
- 世界坐标转为局部坐标
- 7_4:verify arg
- php常用验证函数
- firefox os 2.0版模拟器QQ初体验
- 消息循环
- 引用和应用对象的区别
- 算法导论12.3插入和删除 练习总结
- poj 1061 扩展欧几里德同余方程求解
- 字符串去空格
- UVA-12657 Boxes in a Line (双向链表)
- MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践
- Java的字符串分割的不同实现
- Java的字符串分割的不同实现