www.463.com永利皇宫

无法解释的灵异事件,中事件冒泡和事件捕获机制的详解

十月 21st, 2019  |  文物考古

摘要:建国现今的十大未解之迷
这么些不能够用正确解释的平地风波被统称为灵异事件,历史传说网(www.lsgushi.com)带您打探下那么些事件呢?

原生js–事件类型

 

1、表单事件:

submit事件

reset事件

click事件

change事件

focus事件(不冒泡) (IE和ES5支撑冒泡的focusin)

blur事件(不冒泡) (IE和ES5支持冒泡的focusout)

input事件(ES5 textinput提供更实惠的拿走输入文字的方案)

 

2、Window事件

load事件

DOMContentLoaded事件

readyStatechage事件

unload事件

beforeunload事件

resize事件

scroll事件

 

3、鼠标事件

click事件

dbclick事件

mouseover事件(冒泡)

mouseout事件(冒泡)

mousedown事件

mouseup事件

contextmenu事件

mouseenter事件(不冒泡)

mouseleave事件(不冒泡)

mousewheel事件(FF DOMMouseScroll事件、DOM3 wheel事件)

 

4、键盘事件

keydown事件

keyup事件

keypress事件

本节介绍种种大范围的浏览器事件。

javascript 中事件冒泡和事件捕获机制的详解

建国至今的十大未解之迷 无法解释的灵异事件十大未解之迷之一 、95成都僵尸 有关成都的府南河闹过僵尸的事情 据说府南河刚改造好的头几年很多人跳河自杀,河水也并不深,水也不急,但是有些人不小心掉进水了里就被淹死了。后来成都盛传府南河闹僵尸,电视台都出来辟遥了的。 据当时内部可靠消息,其实掉下去的人不是淹死的。他们被打捞上后均发现身上有严重灼伤的痕迹,也就是被烧死的。有关部门还派人调查过。不过调查不出什么也只好不了了之了。“僵尸这个事喃.是轰动咯全四川的,当时我在读5.年级撒.非吓人的.据说僵尸还扮成人样子..坐火车到处跑..看到你合适按就咬你1.口.我天天放学只有那么怕遇到起咯”

生气勃勃、鼠标事件


鼠标事件指与鼠标相关的风云,主要有以下一些。

两者功能:陈诉事件触发时序难题

1.1、click事件,dblclick事件

当客商在Element节点,document节点,window对象上单击鼠标(或按下回车键)时,click事件触发。

“鼠标单击”定义为,顾客在同样职责实现一回mousedown动作和mouseup动作。它们的触及顺序是:mousedown第大器晚成接触,mouseup随着触发,click末段触发。

无法解释的灵异事件,中事件冒泡和事件捕获机制的详解。上边是一个装置click事件监听函数的例证。

div.addEventListener("click", function( event ) {
  // 显示在该节点,鼠标连续点击的次数
  event.target.innerHTML = "click count: " + event.detail;
}, false);

dblclick事件当顾客在element、document、window对象上,双击鼠标时触发。该事件在mousedownmouseupclick现在触发。

事件捕获:从document到触发事件的丰富节点,即自上而下的去触发事件—由外到内

1.2、mouseup事件,mousedown事件,mousemove事件

mousedown事件在按下鼠标键时接触。
mouseup事件在假释按下的鼠标键时触发。
mousemove事件当鼠标在一个节点内部移动时接触。当鼠标持续运动时,该事件会接连触发。为了幸免质量难题,建议对该事件的监听函数做一些范围,比方限制后生可畏段时间内只好运维二次代码。

事件冒泡:自下而上的去触发事件—由内到外

1.3、mouseover事件,mouseenter事件

mouseover事件和mouseenter事件,都是鼠标步向二个节点时接触。

四头的分别是,mouseenter事件只触发二遍,而意气风发旦鼠标在节点内部移动,mouseover事件会在子节点上接触数十次。

// HTML代码为
// <ul id="test">
//   <li>item 1</li>
//   <li>item 2</li>
//   <li>item 3</li>
// </ul>

var test = document.getElementById('test');

// 进入test节点以后,该事件只会触发一次
// event.target 是 ul 节点
test.addEventListener('mouseenter', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 进入test节点以后,只要在子Element节点上移动,该事件会触发多次
// event.target 是 li 节点
test.addEventListener('mouseover', function (event) {
  event.target.style.color = 'orange';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

绑定事件措施的第四个参数,正是调节事件触发顺序是还是不是为事件捕获

1.4、mouseout事件,mouseleave事件

mouseout事件和mouseleave事件,都以鼠标离开四个节点时接触。

两头的不同是,mouseout事件会冒泡,mouseleave事件不会。子节点的mouseout事件会冒泡到父节点,进而触发父节点的mouseout事件。mouseleave事件就从不这种成效,所以离开子节点时,不会触发父节点的监听函数。

true,事件捕获;false,事件冒泡

1.5、contextmenu事件

contextmenu事件在叁个节点上点击鼠标右键时接触,恐怕按下“上下文菜单”键时触发。

相似暗许false,即事件冒泡

二、MouseEvent对象


Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM结束,祖先级的风云就绝不接触了 

2.1、概述

上边是自个儿尝试的例子:

2.1、概述

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>事件冒泡与事件捕获</title> 
  <script> 
    window.onload = function () { 
      document.getElementById("parent").addEventListener("click",function(e){ 
        alert("parent事件被触发,"+this.id); 
      },true) 
      document.getElementById("child").addEventListener("click",function(e){ 
        alert("child事件被触发,"+this.id) 
      },true) 
    } 

  </script> 
</head> 
<body> 
<div id="parent"> 
  parent事件 
    <div id="child" class="child"> 
  child事件 
  </div> 
</div> 
</body> 
</html> 

2.1、概述

 例子里本人加了第八个true,是事件捕获。

2.1、概述

若是不加则是暗中同意的风浪冒泡,那时候事件触发时序正是自内向外

2.1、概述

以上正是javascript
中事件冒泡和事件捕获机制的详解,如有疑问请留言也许到本站社区交换切磋,谢谢阅读,希望能扶助到大家,多谢大家对本站的协理!

三、wheel事件


wheel事件是与鼠标滚轮相关的风浪,近些日子独有五个wheel事件。顾客滚动鼠标的滚轮,就接触那一个事件。

该事件除了继续了Mouse伊夫nt、UI伊夫nt、伊芙nt的特性,还也可能有多少个自个儿的本性。

  • deltaX:再次回到一个数值,表示滚轮的水准滚动量。
  • deltaY:重返七个数值,表示滚轮的垂直滚动量。
  • deltaZ:重临三个数值,表示滚轮的Z轴滚动量。
  • deltaMode:再次来到二个数值,表示滚动的单位,适用于地方三个属性。0表示像素,1表示行,2象征页。

浏览器提供八个Wheel伊夫nt构造函数,能够用来变化滚轮事件的实例。它承受五个参数,第二个是事件名称,第一个是布署对象。

var  syntheticEvent = new WheelEvent("syntheticWheel",  {"deltaX": 4, "deltaMode": 0});

你可能感兴趣的作品:

  • js之事件冒泡和事件捕获详细介绍
  • js事件冒泡、事件捕获和阻止私下认可事件详解
  • javaScript
    事件绑定、事件冒泡、事件捕获和事件实践顺序整理总括
  • JS中绑定事件顺序(事件冒泡与事件捕获差异)
  • JS中事件冒泡和事件捕获介绍
  • javascript事件冒泡和事件捕获详解
  • js事件冒泡与事件捕获详解
  • 龙马精神篇作品让您到底弄懂JS的平地风波冒泡和事件捕获
  • 浅谈javascript中的事件冒泡和事件捕获
  • JavaScript事件冒泡与事件捕获实例深入分析

四、键盘事件


五、进程事件


六、拖拉事件


七、触摸事件


触摸API由八个对象组成。

Touch
TouchList
TouchEvent

八、表单事件


8.1、Input事件,select事件,change事件

以下事件与表单成员的值变化有关。
(1)、input事件
input事件当<input>、<textarea>的值发生变化时会触发。别的,张开contenteditable属性的成分,只要值产生变化,也会触发input事件。

input事件的五个特征,正是会三翻五次触发,譬如客商没次按下二遍开关,就能触发一回input事件。

(2)、select事件
select事件当在<input>、<textarea>中选中文本时触发。

www.463.com永利皇宫,(3)、Change事件
Change事件当<input>、<select>、<textarea>的值产生变化时接触。它与input事件的最大区别,正是不会接连触发,唯有当如日方升切退换变成时才会接触,何况input事件必然会掀起Change事件。

8.2、reset事件,submit事件

以下事件产生在表单对象上,并不是爆发在表单的分子上。
(1)、reset事件
reset事件当表单重新恢复设置(全体表单成员变回默许值)时接触。

(2)、submit事件
submit事件当表单数据向服务器交由时接触。注意,submit事件的发生对象是form成分,并非button成分(就算它的项目是submit),因为提交的是表单,并非开关。

九、文书档案事件


9.1、beforeunload事件,unload事件,load事件,error事件,pageshow事件,pagehide事件

以下事件与网页的加载与卸载相关。
(1)、beforeunload事件

(2)、unload事件

(3)、load事件,error事件

(4)、pageshow事件,pagehide事件

9.2、DOMContentLoaded事件,readystatechange事件

以下事件与文书档案状态相关。

(1)、DOMContentLoaded事件

(2)、readystatechange事件

9.3、scroll事件,resize事件

以下事件与窗口行为有关。
(1)、scroll事件
scroll事件在文书档案或文书档案成分滚动时接触,重要出现在客户拖动滚动条。

window.addEventListener('scroll', callback);

由于该事件会接二连三地质大学方触及,所以它的监听函数之中不该有特别费用总括的操作。推荐的做法是应用
requestAnimationFrame或set提姆eout调节该事件的触发频率,然后可以整合customEvent抛出贰个新事件。

(2)、resize事件
resize事件在改换浏览器窗口大时辰触发,产生在window、body、frameset对象方面。

该事件也会接连地质大学方触及,所以最相仿上面的scroll事件一样,通过throttle函数调节事件触发频率。

9.4、hashchange事件,popstate事件

以下事件与文书档案的UOdysseyL变化有关。
(1)、hashchange事件

(2)、popstate事件

9.5、cut事件,copy事件,paste事件

以下八个事件属于文本操作触发的事件。

  • cut事件:在将入选的内容从文书档案中移除,参预剪贴板后触发。
  • copy事件:在当选的剧情参加剪贴板后触发。
  • paste事件:在剪贴板内容被粘贴到文书档案后触发。

9.6、宗旨事件

以下事件与文书档案的U瑞鹰L变化有关。
(1)、hashchange事件

(2)、popstate事件

相关文章

Your Comments

近期评论

    功能


    网站地图xml地图