JavaScript中事件对象的原理是什么

　　介绍

本篇文章为大家展示了JavaScript中事件对象的原理是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

JS中常用的事件有:

<李>

页面事件:负荷;

<李>

焦点事件:焦点,模糊;

<李>

鼠标事件:点击,mouseout,鼠标悬停,mousemove等;

<李>

键盘事件:keydown,弹起,键盘按键;

<李>

形式表单事件:重置,提交;

<李>

内容变化事件:变化、输入

那JS中“事件对象”,到底是个什么东西?

首先,什么是事件呢?

首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触发这个事件,然后浏览器会感知(或者说捕获)到用户的这个行为,就会去响应处理这个事件。这个就称之为事件。

那么说,产生事件对象的原因是什么?

事件的触发,大部分情况下是用户想去操作的一种行为,也就是说,我们并不能确定用户什么时间触发,而且,由于事件的传播机制,我们甚至不能确定事件具体触发在哪个节点,这是一件令人很头疼的事情,

为了解决这个问题,在事件发生以后,系统会调用我们写好的事件处理程序(一段代码)来解决。

由此,引出了什么是事件对象?

系统会在调用处理程序时,把有关事件发生的一切信息,封装成一个对象,作为参数,传送给监听函数(事件处理程序)。那么说这个对象,称之为事件对象。

根据事件类型的不同,事件对象中包含的信息也有所不同,如点击事件中,包含鼠标点击的横纵坐标位置,键盘事件中,包含键盘的键值等,

& lt; body> 　　,& lt; div  id=癲iv"比; 　　,& lt; p> pppp

　　,& lt;/div> 　　,& lt; input 类型=皌ext",价值=https://www.yisu.com/zixun/" id="我"> 　　 　　<脚本> 　　var d=. getelementbyid (div);//鼠标事件 　　d.addEventListener(“点击”,函数(e) { 　　console.log (e); 　　}); 　　var i=. getelementbyid(“我”);//键盘事件 　　i.addEventListener (keydown, k); 　　函数k (e) { 　　console.log (e); 　　} 　　

JavaScript中事件对象的原理是什么

现在了解了事件对象的含义后,我们来看看事件对象中都有哪些属性和方法?

<强>(1)普通属性:

事件。泡沫:返回一个布尔值,表示当前事件是否会冒泡;

event.eventPhase:返回一个整数值,表示事件流在传播阶段的位置

0:事件目前没有发生。
1:事件目前处于捕获阶段。
2:事件到达目标节点。
3:事件处于冒泡阶段。

事件。类型:返回一个字符串,表示事件类型,大小写敏感;

事件。时间戳:返回一个毫秒时间戳,表示事件发生的时间,

clientX, clientY:获取鼠标事件触发的X, Y坐标

事件对象

<强>(2)事件代理/委托属性:

event.target:对事件触发的引用,返回触发事件发生的那个节点。(重点)

事件。currentTarget:返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点。(了解即可)

, var  d =, . getelementbyid (& # 39; d # 39;);=,d.onclick 函数(e) { 　　,//返回事件节点 　　,console.log (e.currentTarget); 　　,//返回触发节点 　　,console.log (e。target); 　　以前,}

事件代理(事件委托)的含义:由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这个方法叫做事件的代理也叫事件代理或者事件委托。

& lt; head> 　　,& lt; title> & lt;/title> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; style> 　　,div{40像素填充:} 　　,# div3{宽度:300 px;高度:,300 px;边界:,1 px  solid 红色;} 　　,# div2{宽度:200 px;高度:,200 px;边界:,1 px  solid 红色;} 　　,# div1{宽度:100 px;高度:,100 px;边界:,1 px  solid 红} 　　,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　,& lt; div  id=癲iv3"在div3 　　,& lt; div  id=癲iv2"在div2 　　& lt;才能div  id=癲iv1"祝辞div1
　　,& lt;/div> 　　,& lt;/div> 　　& lt;/body> 　　& lt; script> 　　,var  d =, . getelementbyid (& # 39; div3& # 39;);=,d.onclick 函数(e) {=,e.target.style.background  & # 39;红色# 39;; 　　,} 　　& lt;/script>

JavaScript中事件对象的原理是什么