javascript的事件触发器介绍的实现_javascript技巧

事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现。当然,在一些特殊情况下,用事件触发器来触发事件比用户的实际操作来触发事件更方便。

对于实现事件触发器,浏览器都有原生的方法来支持,但是在兼容性上又有很大的出入,这种兼容性的问题完全在意料之中,IE有自己的方法,其他标准浏览器也有一套方法,不说谁的方法好与不好,对于WEB开发者来说搞出几套方法就是对开发人员的一种折磨。IE支持fireEvent方法来实现事件触发,标准浏览器支持dispatchEvent来实现事件触发,两面派的IE9是两者都支持。下面是出自prototype.js的源码(其实我是从司徒正美的博客复制过来的):

复制代码 代码如下:

var fireEvent = function(element,event){
 if (document.createEventObject){
  // IE浏览器支持fireEvent方法
  var evt = document.createEventObject();
  return element.fireEvent('on'+event,evt)
 }
 else{
  // 其他标准浏览器使用dispatchEvent方法
  var evt = document.createEvent( 'HTMLEvents' );
  // initEvent接受3个参数:
  // 事件类型,是否冒泡,是否阻止浏览器的默认行为
  evt.initEvent(event, true, true); 
  return !element.dispatchEvent(evt);
 }
};

上面的方法可以兼容主流的浏览器以实现事件触发器的功能。但是对于一些封装好的事件处理系统,如jQuery的event模块,就没这么简单了,只能通过模拟来实现了。我在之前写过一个很简单的事件处理系统,最近又碰到自定义事件的需求,于是在之前的事件系统的基础上模拟了一个事件触发器,代码如下:

复制代码 代码如下:

/**
 * 事件触发器
 * @param { Object } DOM元素
 * @param { String / Object } 事件类型 / event对象
 * @param { Array }  传递给事件处理函数的附加参数
 * @param { Boolean } 是否冒泡
 */
trigger : function( elem, event, data, isStopPropagation ){
 var type = event.type || event,
  // 冒泡的父元素,一直到document、window
  parent = elem.parentNode ||
   elem.ownerDocument ||
   elem === elem.ownerDocument && win,
  eventHandler = $.data( elem, type + 'Handler' );

 isStopPropagation = typeof data === 'boolean' ?
  data : (isStopPropagation || false);

 data = data && isArray( data ) ? data : [];

 // 创建自定义的event对象  
 event = typeof event === 'object' ?
  event : {
   type : type,
   preventDefault : noop,
   stopPropagation : function(){
    isStopPropagation = true;
   }
  };

 event.target = elem;  
 data.unshift( event );
 if( eventHandler ){
  eventHandler.call( elem, data );
 }
 // 递归调用自身来模拟冒泡
 if( parent && !isStopPropagation ){
  data.shift();
  this.trigger( parent, event, data );
 }
}

模拟的原理并不难,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行就差不多了,这是最基本的。

在实际的事件发生时浏览器会生成一个event对象,里面包含了一些事件发生时的属性和信息。如果没有实际的事件发生是没有这个event对象的,所以上面的代码也创建了一个event对象满足最基本的功能。

还有事件冒泡,如果没有实际的事件发生,自然也不会有冒泡的行为,那么如果要模拟冒泡的功能,就必须不断的查找父元素并检查是否绑定了相同类型的事件,直至到document和window为止,如果结构复杂,这种递归调用的方法性能估计会不怎么样。

最后是浏览器的默认行为,我觉得这个要去模拟相当麻烦,麻烦到不知如何去实现,比如a标签默认的跳转,我测试了jQuery的trigger,也没有实现,但是一些其他的行为貌似又在API手册中有介绍。毕竟这个功能不是很重要,暂时也没做过多的深究。

 

 

时间: 2024-11-08 18:00:15

javascript的事件触发器介绍的实现_javascript技巧的相关文章

关于JavaScript中事件绑定的方法总结_javascript技巧

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

javascript相关事件的几个概念_javascript技巧

客户端javascript程序采用了异步事件驱动编程模型. 相关事件的几个概念: 事件类型(event type):用来说明发生什么类型事件的字符串: 事件目标(event target):发生事件的对象: 事件处理程序(event handler):处理或响应事件的函数: 事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象: 事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程: 注册事件处理程序: 1.设置javascri

Javascript动态绑定事件的简单实现代码_javascript技巧

下面是页面的dom结构 复制代码 代码如下: <ul id="test"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 下面是javascript代码 复制代码 代码如下: //根据ID获取对象 function id(v) { return document.getElementById(

JavaScript 获取事件对象的注意点_javascript技巧

平时我们获取事件对象一般写法如下: 复制代码 代码如下: function getEvent(event) { return event || window.event // IE:window.event } 如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数): 复制代码 代码如下: function getEvent() { return arguments[0] || window.event // IE:window.event } 这样的写法在除

javascript键盘事件全面控制脚本代码_javascript技巧

Keyboard Event Handler Lab onKeyDown onKeyPress onKeyUp Key Codes 0 0 0 Char Codes (IE5/Mac; NN6) 0 0 0 Modifier Keys Shift Shift Shift Ctrl Ctrl Ctrl Alt Alt Alt [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

JavaScript 事件冒泡简介及应用_javascript技巧

一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,

javascript中为某个元素指定事件的三种方式_javascript技巧

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写

javascript实现在某个元素上阻止鼠标右键事件的方法和实例_javascript技巧

最近在做一个小东西的时候需要在某一个元素上"右击"触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑.这就要求屏蔽默认的右键菜单 IE和FF下面的元素都有oncontextmenu这个方法,在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果.IE并不支持这个方法,在IE下面一般是通过触发方法后return false来实现阻止默认事件的. 通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特

JavaScript实现上下浮动的窗口效果代码_javascript技巧

本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win