js什么是事件对象,js原生事件流

js中事件对象、事件源对象、事件流分析理解

　　事件对象（event）

　　什么是事件：事件是指js中能够发生的所有被监控的事件，比如：(鼠标、键盘、浏览器窗口变化等。)

　　什么是事件对象？一般来说，它是记录一个事件的各种信息的对象。这里需要注意的是：事件对象会有兼容性问题，在除IE的浏览器中为event，而非浏览器中为window.event，

　　btn.onclick=function(事件){ let e=event window . event }事件源对象

　　简单来说，就是说事件发生在那个对象上。对于元素元素，事件源对象是指您单击的元素。还有浏览器兼容性问题：

　　fireFox中的Event.srcElement和IE中的event.target

　　请参考事件对象事件流，了解兼容的编写。

　　事件主要分为两类：1。捕捉事件；2.气泡事件的触发顺序是它们在气泡中首次被捕获的顺序。

　　但是再细分的话，在抓取冒泡阶段会有一个目标阶段，也就是要操作的dom元素的操作阶段。

　　捕获事件

　　首先，顶层的节点首先接收事件，然后将它向下传播到特定的节点。例：当用户点击P元素并采用事件捕获时，点击事件将按照documenthtmbodyp的顺序传播。传播方式是由外向内。

　　冒泡事件

　　与捕获事件相反，它是由内而外传递的。当用户点击P时，它将被传递给父节点pbodyhtml。* * *因为此功能通常用于事件委派。

　　事件委托

　　我们将所有子元素触发的相同事件绑定到父元素，这可以减少DOM操作并提高性能。具体使用方法是使用事件源对象的方法。

　　保险商实验所

　　li1/李

　　li2/李

　　李/李

　　li4/李

　　li5/李

　　/ul要将点击事件绑定到李，通常我们的做法是在现场将点击事件循环给李。

　　let oLi=document . query selector all( Li )

　　for(让我；长度；i ){

　　奥利[我]。onclick=function(){

　　console.log(i )

　　}

　　}而使用事件委托的方法是

　　let oUl=document . query selector( ul )

　　oUl.onclick=函数(事件){

　　设e=事件窗口.事件

　　console.log(例如target.innerHTML)

　　}优点提高性能，不需要逐个循环所有元素来绑定事件。灵活、动态创建的新元素不需要重新绑定事件。阻止事件冒泡和阻止默认事件

　　阻止事件冒泡的操作（兼容性写法）

　　* * *有些事件不需要冒泡。

　　函数停止冒泡(事件){

　　E=事件 window.event//compatible事件对象的编写

　　e.stopProgation()？e . stop intrusion():e . cancel bubble=true//ie兼容拼写}阻止默认事件（兼容写法）

　　* * *阻止A选项卡和鼠标右键默认跳转和菜单事件。

　　函数cancelHandle(事件){

　　var e=eventwindow.event

　　e.preventDefault()？e . prevent default():e . return value=false/* ie */}相关推荐：【JavaScript视频教程】

　　也就是上面的文章详细解释了js中事件对象、事件源对象和事件流的细节。请多关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。