DOM模型(七)—— 事件类型

  ​根据Australia传播媒介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.5、contextmenu事件

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

9.3、scroll事件,resize事件

以下事件与窗口行为有关。
(1)、scroll事件
scroll事件在文书档案或文书档案元素滚动时接触,首要出以往客商拖动滚动条。

window.addEventListener('scroll', callback);

是因为该事件会接连地大方接触,所以它的监听函数之中不应有有非常费用总结的操作。推荐的做法是使用
requestAnimationFrame或setTimeout调节该事件的触发频率,然后能够整合customEvent抛出贰个新事件。

(2)、resize事件
resize事件在改造浏览器窗口大小时触发,爆发在window、body、frameset对象方面。

DOM模型(七)—— 事件类型。该事件也会三番陆四处质大学方接触,所以最周边上面的scroll事件相近,通过throttle函数调控事件触发频率。

九、文书档案事件


五、进程事件


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事件。

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.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);

8.2、reset事件,submit事件

以下事件产生在表单对象上,并不是发出在表单的积极分子上。
(1)、reset事件
reset事件当表单重新初始化(全部表单成员变回私下认可值)时接触。

(2)、submit事件
submit事件当表单数据向服务器交由时接触。注意,submit事件的发出对象是form成分,而不是button元素(纵然它的类型是submit),因为提交的是表单,并不是开关。

六、拖沓事件


意气风发、鼠标事件


鼠标事件指与鼠标相关的平地风波,首要有以下部分。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注