本节介绍各个大范围的浏览器事件,但事件缘由未知

  ​依据澳国传播媒介5日前卫报纸发表,马德里东北部朝气蓬勃处住所发生枪击事件,产生2人一瞑不视,1人受伤。这两天公安部已经达到现场,但事件缘由未知。(央视新闻报道工作者王聪)

原生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事件

本节介绍种种大面积的浏览器事件。

少年老成、鼠标事件


鼠标事件指与鼠标相关的轩然大波,首要有以下一些。

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从今今后触发。

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事件就一向不这种效能,所以离开子节点时,不会触发父节点的监听函数。

1.5、contextmenu事件

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

二、MouseEvent对象


2.1、概述

2.1、概述

2.1、概述

2.1、概述

2.1、概述

三、wheel事件


wheel事件是与鼠标滚轮相关的轩然大波,这两天只有三个wheel事件。顾客滚动鼠标的滚轮,就接触这么些事件。

该事件除了三回九转了MouseEvent、UI伊夫nt、Event的天性,还应该有多少个协调的性情。

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

浏览器提供三个Wheel伊夫nt构造函数,可以用来扭转滚轮事件的实例。它选拔四个参数,第二个是事件名称,第二个是布局对象。

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

四、键盘事件


五、进程事件


六、拖拖拉拉事件


七、触摸事件


触摸API由四个指标组成。

Touch
TouchList
TouchEvent

八、表单事件


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

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

input事件的多少个特点,正是会接连触发,比如客户没次按下叁回按钮,就能接触三次input事件。

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

(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或setTimeout调控该事件的触发频率,然后能够组合customEvent抛出二个新事件。

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

该事件也会三番五次地质大学方触及,所以最相近上边的scroll事件相近,通过throttle函数控制事件触发频率。

9.4、hashchange事件,popstate事件

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

(2)、popstate事件

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

以下八个事件归属文本操作触发的风浪。

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

9.6、主旨事件

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

(2)、popstate事件

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图