事件的了解

事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。DOM支持大量的事件。
DOM事件操作(监听和触发),都定义在EventTarget接口。所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如XMLHttpRequest、AudioNode、AudioContext)也部署了这个接口。
该接口主要提供三个实例方法:
addEventListener:绑定事件的监听函数;
removeEventListener:移除事件的监听函数;
dispatchEvent:触发事件;

EventTarget.addEventListener()

用于在当前节点或对象上,定义一个特定事件的监听函数。一旦这个事件发生,就会执行监听函数。该方法没有返回值。

target.addEventListener(type, listener[, useCapture]);
 

type:事件名称,大小写敏感。
listener:监听函数。事件发生时,会调用该监听函数。
useCapture:布尔值,表示监听函数是否在捕获阶段(capture)触发(参见后文《事件的传播》部分),默认为false(监听函数只在冒泡阶段被触发)。该参数可选。
下面是一个示例:

function hello(){
  console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello,false);
 

监听函数

浏览器的时间模型就是通过监听函数(listener)对事件做出反应。
事件发生后,浏览器监听到了这件事,就会执行对应的监听函数。
这是事件驱动编程模式(event-driven)的主要编程方式。
JavaScript有三种方法,可以为事件绑定监听函数。

方法一:HTML的on-属性(不好)

HTML语言允许在元素的属性中,直接定义某些事件的监听代码。

<body onload="doSomething()">
<div onclick="console.log('触发事件')">
 

上面代码为body节点的load事件,
div节点的click事件,指定了监听代码,一旦事件发生,就会执行这段代码。
元素的事件监听属性,都是on加上事件名,比如onload就是on+load,表示load事件的监听代码。
注意,这些属性的值是将会执行的代码,而不是一个函数。
一旦指定的事件发生,on—属性的值是原样传入JavaScript引擎执行。因此如果要执行函数,不要忘记加上一对圆括号。

<!-- 正确 -->
<body onload="doSomething()">

<!-- 错误 -->
<body onload="doSomething">
 

双层click事件

<div onclick="console.log(2)">
  <button onclick="console.log(1)">点击</button>
</div>
 

上面代码中,是

的子元素。

的click事件,也会触发

的click事件。由于on-属性的监听代码,只在冒泡阶段触发,
所以点击结果是先输出1,再输出2,即事件从子元素开始冒泡到父元素。
直接设置on-属性,与通过元素节点的setAttribute方法设置on-属性,效果是一样的。

el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">
 

原创文章,作者:吐槽君,如若转载,请注明出处:https://www.pipipi.net/14776.html

(0)
上一篇 2021年5月31日 下午5:43
下一篇 2021年5月31日 下午5:59

相关推荐

发表评论

登录后才能评论