javascript事宜

2024年5月6日 268次阅读 来源: alisa

事宜的实质是顺序各构成之间的一种通信体式格局，也是异步编程的一种完成。
—-摘自JavaScript规范参考教程

1.EventTarget接口

EventTarget是吸收事宜监听跟动身的接口。一切的节点对象都邑有这个接口。
该接口供应三个实例要领。

 addEventListener:绑定监听事宜
 removeEventListener:移除监听事宜
 dispatchEvent：触发事宜

1.1 EventTarget.addEventListener()

   EventTarget.addEventListener()用于完成为节点或许对象绑定一个监听事宜，一个对象或许节点可以绑定多个监听事宜，但若每一个监听事宜的监听函数是同一个的话就只会实行一次，其他函数会自动被移除。

该要领接收三个参数。

target.addEventListener(type,listener[,userCapture]);
type:事宜(如：click,focus)的称号，大小写敏感。
listener:监听函数（函数名）。事宜发作时，就会实行此函数。
useCapture:布尔指，示意监听函数是不是在捕捉阶段触发，默认值：false（函数只在冒泡时触发）

example 1：

oDiv=document.querySelector('.div1'); 
function eventFun(){ 
   console.log('监听事宜') 
} 
oDiv.addEventListener('click',eventFun,false);

关于参数另有别的两个状况
1.第二个参数除了监听函数，还可以是具有handleEvent要领的对象
example 2:

oDiv.addEventListener(‘click’,

{ handleEvent:function(){

console.log(‘handleEvent要领’);

}

});

2.第三个参数除了布尔值useCapture，还可以是一个属性设置对象。该对象有以下属性

  • capture：布尔值，示意该事宜是不是在捕捉阶段触发监听函数。
  • once： 布尔值，示意监听函数只触发一次，然后自动移除。
  • passive：布尔值，示意监听函数不会挪用事宜的preventDefault要领。假如监听函数挪用了，浏览器会自动疏忽这个请求，并在控制台输出一行正告。

1.2 EventTarget.removeEventListener()
该要领重要用于移除addEventListener增加的事宜监听函数。该要领没有返回值。用法与addEventListener()要领完整一值。

1.3 EventTarget.dispatchEvent()
EventTarget.dispatchEvent()要领在当前节点上动身指定事宜，从而触发监听函数的实行。该要领返回一个布尔值，只需一个监听函数挪用了Event.preventDefault()，则返回false，不然返回true。

 EventTarget.dispatchEvent(event)

example 3:

oDiv.addEventListener(‘click’,eventFun,false);

var event = new Event(‘click);

oDiv.dispatchEvent(event);//自动实行click事宜。

2.监听函数

浏览器的事宜模子就是经由过程监听函数来对事宜作出反应的，浏览器监听到这个事宜就会实行对应的监听函数。
javascript中有三种要领可以为事宜绑定监听函数

2.1 html的on-属性(事宜名)

 <div class="addPanel" onclick="doFun()"></div>
 //如许绑定的是函数名+(),如许当事宜发作时就会马上实行函数

2.2元素节点的事宜属性

div.onclick=function(){
  console.log('节点事宜')
}

2.3 EventTarget.addEventListener()
运用要领同第一小节

2.4 总结
第一种要领违反了html与javascriot代码星散的准绳，不利于代码分工，不引荐运用。
第二种要领，同一个事宜只能定义一个监听函数。假如定义屡次，后一次会把前面的覆蓋掉。不引荐运用。
第三种是比较引荐且官方指定的监听函数要领，缘由以下：

1.同一个事宜可以增加多个监听函数。
2.可以指定在哪一个阶段触发监听函数。
3.除了DOM节点，其他对象(比方：window,XMLHttpRequest等)也有这个接口，它等于是全部javascript一致的监听函数接口。
    原文作者：alisa
    原文地址: https://segmentfault.com/a/1190000018705145
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞