事件类型,孟买一处住所产生枪击

by admin on 2019年3月2日

  ​根据澳大利亚媒体5日最新报道,悉尼西北部一处住所发生枪击事件,造成2人死亡,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之后触发。

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、UIEvent、Event的属性,还有几个自己的属性。

  • deltaX:返回一个数值,表示滚轮的水平滚动量。
  • deltaY:返回一个数值,表示滚轮的垂直滚动量。
  • deltaZ:返回一个数值,表示滚轮的Z轴滚动量。
  • deltaMode:返回一个数值,表示滚动的单位,适用于上面三个属性。0表示像素,1表示行,2表示页。

浏览器提供一个WheelEvent构造函数,可以用来生成滚轮事件的实例。它接受两个参数,第一个是事件名称,第二个是配置对象。

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

以下事件与文档的URL变化相关。
(1)、hashchange事件

(2)、popstate事件

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

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

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

9.6、焦点事件

以下事件与文档的URL变化相关。
(1)、hashchange事件

(2)、popstate事件

发表评论

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

网站地图xml地图