浅谈Javascript事件模拟,javascript自定义事件亚洲城

时间:2019-08-29 00:15来源:亚洲城ca88唯一官方网站
javascript自定义事件 Javascript中的事件包含click、mouseover、submit、change等等,它们分别在要素被点击、鼠标滑过、表单提交、域的剧情改变时接触,那么自定义事件是如何定义和接触的?

javascript自定义事件

Javascript中的事件包含click、mouseover、submit、change等等,它们分别在要素被点击、鼠标滑过、表单提交、域的剧情改变时接触,那么自定义事件是如何定义和接触的?它有何样意义?

 

哪些定义?

 

自定义事件创造分两步:成立事件模型、起头化。

 

document.createEvent()用于创设事件模型,它接受多少个参数,表示事件模型的门类。事件模型类型一共有4类,分别是:

 

UIEvents(通用的UI事件),鼠标事件键盘事件都持续自UI事件

 

Mouse伊芙nts(通用的鼠标事件)

 

Mutation伊夫nts(通用的万物更新事件)

 

HTMLEvents(通用的HTML事件)

 

 

 

 

 

 

 

怎么着叫突变事件?文书档案中的某些成分被移除了,就能够触发突变事件中的DOMNodeRemovedFromDocument事件

 

何以叫HTML事件,便是因素上的事件。如blur、change、resize

 

对4种事件模型详心情兴趣可活动这里理解越来越多……

 

成立事件模型后,起首化重回的event对象。以上4种事件模型对应的起首化方法分别是initUIEvent()、initMouse伊夫nt()、initMutation伊夫nt()、init伊芙nt(),它们收到3个参数:

 

type 事件类型,如“click”

 

bubble 是或不是冒泡

 

cancelable 是或不是足以收回事件暗中同意行为

 

自然他们分别还也许有别的参数,这里关键介绍自定义事件,就不开展了。

 

 

 

何以触发?

 

自定义事件初步化以往,如何触发呢?自定义事件和浏览器的一颦一笑不相干,都是因而成分的dispatch伊芙nt()方法主动触发的,改措施接收一个参数,表示触发的风浪目的,即document.create伊芙nt()的再次来到值。

 

综上,来三个例子:

 

 

执行

 

 源码:

 

<script>  
// 创建自定义事件
var e = document.createEvent("HTMLEvents");
// 初始化wangmeijian事件
e.initEvent("wangmeijian", false, true);
// 监听document的wangmeijian事件
document.addEventListener("wangmeijian", function(){
    alert("触发成功!");
})
// 触发自定义事件
document.dispatchEvent(e);  
</script> 

 

 IE8及以下浏览器不援救create伊芙nt方法,可是它们有onprototypechange事件,当dom元素的属性值发生变化时会触发那一个事件,也正是说,能够给dom成分设置三个性质attr,监听该因素的onprototypechange事件,判别发生变化的性能(event对象下的prototypeName)是还是不是attr,是则试行自定义事件函数。要百尺竿头更上一层楼触发onprototypechange事件,只必要修改成分的attr属性值就可以。

 

demo(仅测量试验了IE11下的IE7、IE8文书档案情势)

 

 

 

 源码:

 

<h1>
        请使用IE8或更低版本的浏览器测试
</h1>
<button id="btn" eventAttr="0">点击修改按钮的eventAttr属性值</button>
<script>  
var btn = document.getElementById("btn");

btn.attachEvent("onpropertychange", function(e){
    if(e.propertyName === "eventAttr"){
        alert("触发成功!");
    }
})
btn.attachEvent("onclick", function(){
    btn.setAttribute("eventAttr", 1);
})
</script> 

 

 

 

 

有何样含义?

 

到此地有的同学会问了,写这样一群代码,最后是为了实行这一行代码

 

alert("触发成功!");

是主动推行的,而且领悟要在怎么时候实践,那怎么不直接写这一行就够了,自定义事件的意义在哪儿?

 

本人的理解是:为了代码解耦,你无需关心事件如曾几何时候产生,你只须要关心事件产生后要做什么样事。在几人同盟开拓中,这一点更为关键!  

 

 

Javascript中的事件包蕴click、mouseover、submit、change等等,它们各自在要素被点击、鼠标滑过、表单提交、域的开始和结果改动时...

那就表示会有适用的平地风波冒泡,并且浏览器会实行分配的事件管理程序。这种力量在测量检验web应用程序的时候,是十二分平价的,在DOM 3级标准中提供了措施来模拟特定的轩然大波,IE9 chrome FF Opera 和 Safari都援助那样的点子,在IE8及在此以前的主意的IE浏览器有他协调的秘籍来效仿事件
a)Dom 事件模拟
  能够因而document上的create伊夫nt()方法,在其他时候成立事件指标,此方法只接受二个参数,既要成立事件目标的风浪字符串,在DOM2 级标准上全数的字符串都以复数情势,在DOM 3级事件上具备的字符串都接纳单数情势,全部的字符串如下:
  UIEvents:通用的UI 事件,鼠标事件键盘事件都以承袭自UI事件,在DOM 3 级上选用的是 UIEvent。
  Mouse伊夫nts:通用的鼠标事件,在DOM 3 级上接纳的是 MouseEvent。
  Mutation伊夫nts:通用的愈演愈烈事件,在DOM 3 级上使用的是 MutationEvent。
  HTML伊芙nts:通用的HTML事件,在DOM3级上还没有一样的。
小心,ie9是独一支持DOM3级键盘事件的浏览器,但其余浏览器也提供了其余可用的措施来效仿键盘事件。
一经创设了二个轩然大波目的,将在开端化那一个事件的相关音讯,各个档期的顺序的事件都有一定的秘诀来初步化,在创设完事件目的之后,通过dispatch伊芙nt()方法来将事件选拔到特定的dom节点上,以便其协理该事件。那些dispatch伊夫nt()事件,支持叁个参数,正是你创设的event对象。
b)鼠标事件模拟
  鼠标事件能够透过创立一个鼠标事件目标来模拟(mouse event object),并且给予她某个相关信息,成立三个鼠标事件经过传给createEvent()方法一个字符串"Mouse伊夫nts",来创设鼠标事件指标,之后经过iniMouseEvent()方法来初阶化重回的事件目的,iniMouse伊芙nt()方法接受15参数,参数如下:
  type string类型 :要接触的平地风波类型,举个例子‘click'。
  bubbles Boolean类型:表示事件是不是应该冒泡,针对鼠标事件模拟,该值应该被装置为true。
  cancelable bool类型:表示该事件是或不是能够被撤回,针对鼠标事件模拟,该值应该被设置为true。
  view 抽象视图:事件予以的视图,这一个值大约全皆以document.defaultView.
  detail int类型:附加的事件消息那么些初叶化时相似应当默感到0。
  screenX int类型 : 事件距离显示屏侧面包车型大巴X坐标
  screenY int类型 : 事件距离荧屏上方的y坐标
  clientX int类型 : 事件距离可视区域侧边包车型客车X坐标
  clientY int类型 : 事件距离可视区域上方的y坐标
  ctrlKey Boolean类型 : 代表ctrol键是或不是被按下,默以为false。
  altKey Boolean类型 : 代表alt键是还是不是被按下,默以为false。
  shiftKey Boolean类型 : 代表shif键是不是被按下,默以为false。
  metaKey Boolean类型: 代表meta key 是不是被按下,默许是false。
  button int类型: 表示被按下的鼠标键,私下认可是零.
  relatedTarget (object) : 事件的关联对象.唯有在模拟mouseover 和 mouseout时用到。

值得注意的是,initMouse伊夫nt()的参数直接与event对象相映射,当中前三个参数是由浏览器采用,独有事件处理函数用到别的的参数,当事件目的作为参数传给dispatch()格局,target属性将会自行被赋上值。下边是一个事例,

复制代码 代码如下:

  var btn = document.getElementById("myBtn");
  var event = document.createEvent("MouseEvents");
  event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
  btn.dispatchEvent(event);

在DOM完毕的浏览器中,全数别的的事件都囊括dbclick,都得以透过一致的法子来兑现。
c)键盘事件模拟
  值得注意的是键盘事件已经从DOM2级事件中移出了,起先在DOM2级事件的草案版中,键盘事件是用作草案的一有个其余,但在最后版被移出了,FF已经落到实处了草案版中的键盘事件,值得注意的是在DOM3级事件中贯彻的键盘事件与DOM2级事件草案版中的键盘事件照旧存在比比较大差其余。
在dom3级事件中成立叁个键盘事件目的是透过createEvent()方法,并传播KeyBoard伊芙nt字符串作为参数,对回到的event对象,调用initKeyBoadEvent()方法初叶化,先河化键盘事件的参数有以下多少个:
  type (string) - 要接触的事件类型,举个例子"keydown".
  bubbles (Boolean) — 代表事件是还是不是相应冒泡.
  cancelable (Boolean) — 代表事件是或不是能够被打消.
  view (AbstractView) — 被授予事件的是图. 日常值为:document.defaultView.
  key (string) — 按下的键对应的code.
  location (integer) — 按下键所在的地方. 0 :私下认可键盘, 1 侧面地点, 2 右边地点, 3 超薄键盘区, 4 设想键盘区, or 5 游戏手柄.
  modifiers (string) — 贰个有空格分开的修饰符列表.
  repeat (integer) — 一行中有些键被按下的次数.
请小心的是,在DOM3事件中,费掉了keypress事件,因此根据上面包车型地铁办法,你只好模拟键盘上的keydown 和 keyup事件。

复制代码 代码如下:

  var textbox = document.getElementById("myTextbox"),event;
    if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
      event = document.createEvent("KeyboardEvent");
      event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",0, "Shift", 0);
    }
    textbox.dispatchEvent(event);

在FF下,允许你通过应用document.createEvent('Key伊夫nts'),这种格局来创设键盘事件,伊始化的方式为initKey伊芙nt(),这么些点子接受十一个参数,
  type (string) — 要接触的事件类型,举个例子"keydown".
  bubbles (Boolean) — 代表事件是不是应当冒泡.
  cancelable (Boolean) — 代表事件是还是不是能够被裁撤.
  view (AbstractView) — 被予以事件的是图. 日常值为:document.defaultView.
  ctrlKey (Boolean) — 代表ctrol键是或不是按下. 默许 false.
  altKey (Boolean) — 代表alt键是不是按下. 私下认可 false.
  shiftKey (Boolean) — 代表shift键是不是按下. 暗中同意 false.
  metaKey (Boolean) — 代表meta键是还是不是按下. 私下认可 false.
  keyCode (integer) — 键按下或自由时键所对应的键码. 暗许是0;
  charCode (integer) — 按下的键的字符所对应的ASCII code.是共keypress事件选用的 私下认可是0.
D)模拟别的事件
鼠标事件和键盘事件是在浏览器中最长被模仿的事件,,不过一些时候同样须求效法突变事件和HTML事件。能够用create伊芙nt('Mutation伊夫nts'),来创设贰个突变事件目的,能够行使initMutationEvent()来开始化那些事件指标,参数包蕴type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.能够利用上边包车型客车主意来模拟三个改头换面事件:
  var event = document.createEvent('MutationEvents');
  event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);
  target.dispatchEvent(event);
对于HTML事件,直接上代码。
  var event = document.createEvent("HTMLEvents");
  event.initEvent("focus", true, false);
  target.dispatchEvent(event);
对此突变事件和HTML事件是相当少在浏览器中用到,因为他俩收应用程序的限量。
E)定制DOM事件
在DOM3级事件中定义了一类事件称为 custom event,作者称之为顾客事件,顾客事件不会原生的被dom触发,而是径直提供,以致于开垦者能够创建他们友善的平地风波,你能够创制三个自个儿的顾客事件,通过调用create伊芙nt('Custom伊夫nt'),对回到的风浪目的调用,initCustom伊夫nt()方法,在这之中传递几个参数type,bubbles,cancelable,detail。ps:小叔子对那部分理解有限,在这里只是一得之见。
F)IE中的事件模拟
从IE8,以及更早版本的IE,都在模拟DOM模拟事件的办法:创立事件目的,初叶化事件新闻,之后触发事件。当然IE在成就那多少个步骤的经过是见仁见智的。
首先差别于dom中开创event对象的法子,IE选取document.create伊夫ntObject()方法,况兼未有参数,重临三个通用的风云目的,接下去要对回到的event对象赋值,此时ie并从未提供伊始化函数,你只好采用物理方法一个一个的赋值,最后在指标元素上调用fireEvent()方法,参数为五个:事件处理的名号和创办的事件目的。当fireEvent方法被调用的时候,event对象的srcElement和type属性将会被自动赋值,别的将急需手动赋值。请看下边包车型地铁例证:

复制代码 代码如下:

  var btn = document.getElementById("myBtn");
  var event = document.createEventObject();
  event.screenX = 100;
  event.screenY = 0;
  event.clientX = 0;
  event.clientY = 0;
  event.ctrlKey = false;
  event.altKey = false;
  event.shiftKey = false;
  event.button = 0;
  btn.fireEvent("onclick", event);

  那个例子创造了多少个平地风波指标,之后通过有些音讯开端化该事件指标,注意事件性质的赋值是冬天的,对于事件目的的话这一个属性值不是很重视,因为只有事件句柄对应的管理函数(event handler)会用到他俩。对于开创鼠标事件、键盘事件依然别的事件的事件指标时期是一向不差距的,因为二个通用的平地风波指标,能够被其他项指标平地风波触发。
  值得注意的是,在Dom的键盘事件模拟中,对于二个keypress模拟事件的结果不会作为字符出现在textbox中,固然对应的事件管理函数已经触发。
  与DOM事件模拟比较,个人以为IE的事件模拟更易于令人记得和收受,统一的风云模型能够带来一些轻易。

你只怕感兴趣的稿子:

  • 接纳JS或jQuery模拟鼠标点击a标签事件代码
  • js模拟点击事件实当代码
  • JavaScript 模拟客户单击事件
  • 详解javascript实现自定义事件
  • javascript 自定义事件初探
  • 详解JavaScript中的自定义事件编写
  • js实现屏蔽暗中认可神速键调用自定义事件示例
  • Javascript自定义事件详解
  • JavaScript中的模拟事件和自定义事件实例分析

编辑:亚洲城ca88唯一官方网站 本文来源:浅谈Javascript事件模拟,javascript自定义事件亚洲城

关键词: 亚洲城ca88