【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事件详解】js事件封装函数,js跨浏览器事件处理机制

var eventUtil = { // 添加句柄 addHandler: function(element, type, handler) { if (element...
  • kongjiea
  • kongjiea
  • 2014年10月20日 10:57
  • 2852

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

js事件封装函数,js跨浏览器事件处理机制
  • qq_16664643
  • qq_16664643
  • 2016年08月17日 17:15
  • 104

滚轮事件--原生JS函数封装

function addwheel(obj,fn){ function wheel(ev){ var oEvent=ev||event; var bDown=t...
  • JJ19941003
  • JJ19941003
  • 2017年01月24日 21:46
  • 732

将一段JS代码封装成一个方法

}).mouseout(function(){ $("#plate-3hover").removeClass("plate-3after") }); $("#plate-4").mousee...
  • AlbenXie
  • AlbenXie
  • 2017年04月17日 16:53
  • 3930

js事件 封装方法(添加事件、删除事件、阻止冒泡、阻止默认行为)

var eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ ...
  • yCharlee
  • yCharlee
  • 2016年09月17日 23:13
  • 934

js原生事件封装

event 添加事件,删除事件,以及冒泡的屏蔽,并都做了兼容性的处理,getByClass 对原生获取class的封装,鼠标拖拽事件的封装,键盘事件的封装...
  • daiqisi
  • daiqisi
  • 2016年05月18日 09:31
  • 1290

C#调用js && js调用C#事件

js: function ss() { alert("底层调用js,调用成功!"); } ...
  • sihun
  • sihun
  • 2011年10月26日 20:44
  • 3246

JS事件发布和订阅的原理

我是小白 学过nodeJS的人, 对eventEmmit这个包应该很熟悉吧…它采用的是事件发布和订阅模式. eventEmmit可以自定义事件名, 并跟某些特定的元素绑定. 而本文抛弃nodeJS包...
  • gong_zhe_511
  • gong_zhe_511
  • 2017年06月21日 16:49
  • 412

前端JS/JQuery常用封装的方法介绍

1. 获取长度为len的随机字符串 function getRandomString(len) {     len = len || 32;     var $chars = 'ABCDEFGH...
  • richangbiji
  • richangbiji
  • 2017年08月25日 23:17
  • 160

ASP.NET-008—JS绑定控件事件

界面上的事件一般可以通过控件自带的事件属性添加事件。其实还有一个方式,就是让JS来给控件绑定事件,这样一来就可以实现控件的事件动态进行变化,在实现功能的时候会更加方便。JS绑定控件事件的格式如下: $...
  • yysyangyangyangshan
  • yysyangyangyangshan
  • 2014年03月31日 22:32
  • 3962
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【js事件详解】js事件封装函数,js跨浏览器事件处理机制
举报原因:
原因补充:

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