javascript的平地风波触发器介绍的兑现,js事件触发器

By admin in 4858美高梅 on 2019年7月28日

4858美高梅 ,事件触发器从字面意思上得以很好的驾驭,正是用来触发事件的,不过某些未有用过的恋人也许就能够吸引了,事件不是经常都由用户在页面上的实操来触发的吗?那一个意见不完全正确,因为某一件事件必须由程序来贯彻,如自定义事件,jQuery的ajax框架的局部自定义事件就无法不由事件触发器来落到实处。当然,在有的特种情形下,用事件触发器来触发事件比用户的实操来触发事件更方便人民群众。

【其实便是电动触发事件,而非手动(交互)触发事件】

对于贯彻事件触发器,浏览器都有原生的法子来支撑,可是在包容性上又有相当大的出入,这种包容性的标题完全在预期之中,IE有谈得来的主意,其余规范浏览器也可能有一套方法,不说什么人的秘诀好与倒霉,对于WEB开拓者来讲搞出几套方法就是对开拓人士的一种折磨。IE补助fire伊夫nt方法来实现事件触发,规范浏览器协理dispatch伊芙nt来兑现事件触发,两面派的IE9是两岸都协助。上面是源于prototype.js的源码(其实自个儿是从司徒正美的博客复制过来的):

dispatchEvent是作为高端浏览器(如chrome、Firfox等)的轩然大波触发器来利用的,那么如何是事件触发器?就是接触事件的事物。也会有人以为多少岂有此理,触发事件不是在竞相中被触发的吗?的确,经常情形下,事件的触及都以由用户的作为如点击、刷新等操作达成,但是,其实有的动静下,事件的接触必须由程序来贯彻,例如ajax框架的部分自定义事件。正如事件的绑定同样,对于浏览器来讲,绑定事件分为高等浏览器和IE浏览器两派,事件触发器也是分为高端浏览器和IE两派,而dispatch伊夫nt正是用于高等浏览器的风浪触发。下边看作者整理的三个接触事件的事例:

复制代码 代码如下:

 

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);
 }
};

  1. <!– 
  2. Author: lJian 
  3. –>  
  4.   
  5. javascript的平地风波触发器介绍的兑现,js事件触发器。<!DOCTYPE html>  
  6. <html>  
  7. <head lang=”en”>  
  8.     <meta charset=”UTF-8″>  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. <script type=”text/javascript”>  
  15.     //document上绑定自定义事件oneating  
  16.     document.addEventListener(‘eat’, function (event) {  
  17.         alert(event.mingzi+’,’+event.message);  
  18.     }, false);  
  19.   
  20.     //创造event的靶子实例。  
  21.     var event = document.createEvent(‘HTMLEvents’);  
  22.     // 3个参数:事件类型,是还是不是冒泡,是还是不是阻止浏览器的暗许行为  
  23.     event.initEvent(“eat”, true, true);  
  24.     /*属性,随意自个儿定义*/  
  25.     event.mingzi = ‘hello,作者是李小贱’;  
  26.     event.message = ‘我今天24岁’;  
  27.   
  28.     //触发自定义事件oneating  
  29.     document.dispatchEvent(event);  
  30. </script>  
  31. </html>  

地点的法子能够包容主流的浏览器以落实事件触发器的功能。可是对于有个别包装好的事件管理系统,如jQuery的event模块,就没那样轻松了,只可以通过模拟来促成了。作者在前边写过二个很简短的事件管理系统,近来又碰着自定义事件的急需,于是在头里的平地风波系统的基础上模仿了贰个事件触发器,代码如下:

dispatchEvent大致正是这三步,上边的事例结果是:在页面载入的时候,会弹出提醒框,约等于接触了oneating那个自定义事件。上边看看浮言来自司徒正美的一段代码:

复制代码 代码如下:

 

/**
 * 事件触发器
 * @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’ );

  1. var fireEvent = function(element,event){  
  2.         if (document.createEventObject){  
  3.             // IE浏览器协理fireEvent方法  
  4.             var evt = document.createEventObject();  
  5.             return element.fireEvent(‘on’+event,evt)  
  6.         }  
  7.         else{  
  8.             // 其余规范浏览器接纳dispatch伊芙nt方法  
  9.             var evt = document.createEvent( ‘HTMLEvents’ );  
  10.             evt.initEvent(event, true, true);  
  11.             return !element.dispatchEvent(evt);  
  12.         }  
  13.     };  

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

 

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

document.creat伊芙ntObject()是IE创造event对象实例的措施,和document.creatEvent(‘HTMLEvents’)在非IE主流浏览器下的意义同样,fire伊芙nt是IE下的风云触发器,与dispatchEvent在非IE主流浏览器下效果一样。

 // 创立自定义的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手册中有介绍。毕竟这一个效应不是很关键,临时也没做过多的琢磨。

 

 

您恐怕感兴趣的稿子:

  • javascript监听鼠标滚轮事件浅析
  • 打包了一个帮忙佚名函数的Javascript事件监听器
  • JavaScript函数获取事件源的小例子
  • JavaScript调控各个浏览器全屏情势的主意、属性和事件介绍
  • javascript中的事件代理初探
  • javascript页面加载完实施事件代码
  • javaScript
    页面自动加载事件详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有