事件

事件
概述
事件(Event)是一种异步编程的实现方式,是程序各个组成部分之间的通信
事件不是JavaScript对象,只是一种信息传递机制,所以事件本身不能承载任何数据内容。
浏览器通过JavaScript的 Event 对象来承载事件数据信息。
当事件发生时,浏览器将被触发元素、发生位置等相关的原始数据存入Event 对象,然后程序通过事件监听获取响应数据。
事件类型
用于描述发生的事件类别, 即事件的名称
事件目标
指发生事件的对象
事件处理程序
处理所发生事件的程序代码
事件对象
包含事件详细信息的JavaScript对象
事件传播
事件发生时,由 window 节点发出,不断经过子元素到达目标元素,然后事件会原路返回,直到回到window
事件委托
DOM事件
document.querySelector(’#div1’).onclick = function (ev) {

}
		    document.querySelector('#div1')["onclick"] = function (ev) {

};
	DOM2事件模型的事件监听
		    document.querySelector('#div1').addEventListener('click', function (ev) {
    
}, false);
	通过元素对象的 addEventListener 方法为其添加事件监听

使用该方式,在多次监听时,不会覆盖,每一个监听均有效
addEventListener 接受3个参数
type
必选 string 类型 指明事件类型(名称)
listener
必选 EventListener类型,事件处理程序,可以是JavaScript方法,也可以是一个匿名方法体
useCapture
可选,boolean 类型, 指定事件是否发生在捕获阶段。默认值为false,表示事件发生在冒泡阶段
事件捕获 Capture Phase
指一个事件发生后,从 window 出发,不断经过下级节点,直到目标节点。
在事件到达目标节点之前的过程,就是捕获阶段
而所有经过的节点,都会触发对应事件
事件冒泡 Bubbling Phase
当事件到达目标节点之后,会沿着捕获阶段的路线返回
因为类似水泡浮起,故称作“冒泡”。
通过冒泡这个事件机制,所有子节点的事件都会被其父级节点所捕获
当事件被触发时,事件监听函数接收一个 Event 对象,即事件对象 (Event Object)
Event 对象包含了事件发生时相关的详细信息
如:坐标。元素等。
配合事件冒泡的机制,可以在DOM根元素上监听所有元素的事件

link
bold
italic

	将事件交给父元素或祖先元素处理的方式,就叫事件委托
	优点
		提高性能
			每一个函数都会占用内存空间,只添加一个事件处理程序,所占用的内存空间更少
		动态监听
			使用委托可以监听 “未来” 的元素。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值