【js事件详解】js事件封装函数,js跨浏览器事件处理机制

转载 2015年07月10日 16:59:10

原文链接:http://blog.csdn.net/kongjiea/article/details/40297651

一、事件流

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

相关知识链接:js的事件冒泡和事件捕获

二、事件处理程序

1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
相关知识链接:addEventListener第三个参数作用

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阻止事件的默认行为


js跨浏览器事件处理机制,封装代码如下:

  1. var eventUtil = {  
  2.     // 添加句柄  
  3.     addHandler: function(element, type, handler) {  
  4.         if (element.addEventListener) {  
  5.             element.addEventListener(type, handler, false);  
  6.         } else if (element.attachEvent) {  
  7.             element.attachEvent('on' + type, handler);  
  8.         } else {  
  9.             element['on' + type] = handler;  
  10.         }  
  11.     },  
  12.     // 删除句柄  
  13.     removeHandler: function(element, type, handler) {  
  14.         if (element.removeEventListener) {  
  15.             element.removeEventListener(type, handler, false);  
  16.         } else if (element.detachEvent) {  
  17.             element.detachEvent('on' + type, handler);  
  18.         } else {  
  19.             element['on' + type] = null;  
  20.         }  
  21.     },  
  22.     //获取事件  
  23.     getEvent: function(event) {  
  24.         return event ? event : window.event;  
  25.     },  
  26.     //获取事件类型  
  27.     getType: function(event) {  
  28.         return event.type;  
  29.     },  
  30.     //获取事件源  
  31.     getElement: function(event) {  
  32.         return event.target || event.srcElement;  
  33.     },  
  34.     //阻止默认事件比如a链接跳转  
  35.     preventDefault: function(event) {  
  36.         if (event.preventDefault) {  
  37.             event.preventDefault();  
  38.         } else {  
  39.             event.returnValue = false;  
  40.         }  
  41.     },  
  42.     //阻止事件冒泡  
  43.     stopPropagation: function(event) {  
  44.         if (event.stopPropagation) {  
  45.             event.stopPropagation();  
  46.         } else {  
  47.             event.cancelBubble = true;  
  48.         }  
  49.     }  
  50. }  


更详细的事件讲解链接:javascript打造跨浏览器事件处理机制:详解

相关文章:   addEventListener第三个参数作用

js的事件冒泡和事件捕获

javascript打造跨浏览器事件处理机制:详解

【js事件详解】js事件封装函数,js跨浏览器事件处理机制

相关文章推荐

js跨浏览器事件处理程序

aaaaaaaaaaaaaaaaaaa sasdsasdasdadasd saswerwerwedgddadasd sa...

js事件处理机制的理解

1、js事件机制 js中事件的发生包括捕获和冒泡两个阶段,两个阶段的传播顺序为 捕获:从最外边父元素节点传递至发生事件的元素节点,即由外到内; 冒泡:从发生事件的元素节点传递至最外边父元素节点,...

Cocos2d-JS 事件处理机制

事件处理机制中的三个角色 在Cocos2d-JS引擎时间处理机制中也有这3个角色。 1.事件 事件类是cc.Event,它的类图如图8-1所示,它的子类有cc.EventTouch(触摸事件)、...

js监听 冒泡机制 dojo事件处理

JS为DOM添加事件 在原生的环境下,为DOM添加事件处理函数有多种方法: input type="button" name="btn" value="点击…" id="btn" oncl...

JS中事件处理机制

在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段(以下未申明均为标准浏览器下) 在DOM2级事件中 ele.addEventListener("click",fn1,true);//...

js事件处理函数中return的作用

这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用...

js事件处理函数中return的作用

这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事...

js事件处理函数中return的作用

JS函数中常常遇到,return ,return true,return false,究竟什么意思呢?如果与onclick搭配呢,如果onclick与return搭配呢?下面详细说明:【1 】首先说明...
  • J080624
  • J080624
  • 2017年02月24日 11:47
  • 933

js事件处理函数/监听函数

当我们刚接触js的时候,我我们需要给一个鼠标绑定是一个事件的时候,通俗的说就是当鼠标发生一定动作的时候,需要去干什么..比如当click鼠标的时候需要做什么.我们或许会这样写: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【js事件详解】js事件封装函数,js跨浏览器事件处理机制
举报原因:
原因补充:

(最多只允许输入30个字)