An article to understand JavaScript events

1. Understand the three event types of JavaScript

1. Mouse events

common mouse events

event	Time of occurrence	Trigger times
onclick	user stand-alone object	1 time
ondbclick	When the user double-clicks an object	1 time
onmouseover	When the mouse moves over an object	1 time
onmouseout	When the mouse moves out of an object	1 time
onmousemove	the mouse is moved	n times
onmousedown	mouse button is pressed	1 time
onmouseup	mouse button is released	1 time

2. Keyboard events

common keyboard events

event	Time of occurrence	Trigger times
onkeydown	keyboard press trigger	1 time
onkeypress	Momentary trigger when keyboard is pressed and released	n times
onkeyup	Triggered when the keyboard is lifted	1 time

a. The event triggered
when the button is pressed for a long time. When a button is pressed for a long time, it will be triggered continuouslyonkeydownonkeypress , and the event will be triggered only after the button is lifted onkeyup.

b. The difference between onkeydown/onkeyup and onkeypress
1) onkeypressIt can only capture letters, numbers, and symbol keys, but not function keys (such as Enter key, F1-F12 keys, etc.); it onkeydown/onkeyupcan basically capture all function keys (some keys of special keyboards) except).
2) When capturing letter keys, onkeypressit can be case-sensitive onkeydownor onkeyupcase-insensitive.
3) When capturing array keys, onkeydown/onkeyupthe main keyboard and the small keyboard can be onkeypressdistinguished, but not.

c. Usually declare the keyboard event on the document
. When using the keyboard event, the keyboard event is usually directly monitored on the document, and it is onkeydownonly onkeyupnecessary to monitor one

d. Judging keyboard keys
When using keyboard events, in addition to detecting whether onkeydownor not the trigger is triggered onkeyup, it is more important to determine which key the user pressed.

When monitoring keyboard events, the browser will pass the event factor e into the event trigger function by default, and the event factor can keyCodeconfirm the ASCII code value of the button through attributes such as etc., and then determine which button the user pressed.

Get the ASCII code of the button in a compatible way

var code=evn.keyCode‖evn.whi‖evn.charCode；

Commonly used ASCII code value reference table

ASCII code value	key or meaning
0	Empty character (Null)
13	Enter key
27	Esc
32	space bar
48-57	Number keys 0-9
65-90	capital letters A-Z
97-122	lowercase letter z
127	Delete key

3. HTML events

Common HTML Events

event	Time of occurrence
onload	After the document or image is loaded
onunload	After the document is unloaded, or when exiting the page
onblur	element loses focus
onselect	text is selected
oninput	When an element gets focus
onchange	content is changed
onfocus	When an element gets focus
onsubmit	when the form is submitted
onreset	reset button is clicked
onresize	When the window is resized
onscroll	Events that occur when the document is scrolled
unbearable	Event fired when the element is being dragged
contract start	Event fired when the element starts to be dragged
ondragover	Event triggered when the element is dragged to the specified area
ondrop	Event fired when the dragged element is dropped

4. event event factor

window.eventThere are two ways to get the event factor. In addition to the keyboard event, you can also use the get event factor object in the trigger function of any event .

element.onclick = function(e){
    
    
	var evn = e || window.event;
}

event object properties

attribute name	illustrate
keyCode	Check the Unicode character code corresponding to the keyboard event
srcElement	Returns the element that triggered the event
target	返回触发事件的元素(对象)
type	返回当前 event 对象表示的事件名称
button	检查按下的鼠标键
x,y	返回鼠标相对于 css 属性中有 position 属性的上级元素的 x 和 y 坐标
clientX,clientY	返回鼠标在浏览器窗口区域的 x 和 y 坐标
screenX,screenY	返回鼠标相对于用户屏幕中的 x 和 y 坐标
altKey	检查 Alt 键的状态。当 Alt 键按下时，值为 True；否则为 False
ctrlKey	检查 Ctr 键的状态。当 Ctr 键按下时，值为 True；否则为 False
shiftKey	检查 Shift 键的状态。当 Shift 键按下时，值为 True；否则为 False
toElement	检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素
fromElement	检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素

注意：检测鼠标按键的button属性仅用于onmousedown、onmouseup和onmousemove事件。对于其他事件，不管鼠标状态如何，都返回0（比如onclick）。它有8个属性值，分别是0没按键、1按左键、2按右键、3按左右键、4按中间键、5按左键和中间键、6按右键和中间键、7按所有的键。

e.target和this的区别

属性	返回值
e.target	返回的是触发事件的对象（元素）
this	返回的是绑定/调用事件的对象（元素）

二、掌握JavaScript的两种事件模型

1. DOM0 事件模型

DOM0 模型有两种绑定事件的方式，分别是内联模型和脚本模型。

a. 内联模型
内联模型又称为“行内绑定”，其绑定事件的方式是直接将函数名作为 HTML 标签某个事件的属性值。

基本语法如下：＜button onclick="func（　）"＞按钮＜/button＞
缺点：违反 W3C 关于 HTML 与 JavaScript 分离的基本原则。

b. 脚本模型
脚本模型又称为“动态绑定”，其绑定的方式是通过在 JavaScript 中选中一个节点，并给节点的 onlick事件添加监听函数。

基本语法如下：window.onload = function(){} || document.getElementById("div").onclick = function(){}

• 优点：实现了 HTML 与 JavaScript 分离，符合 W3C 的基本原则。
• 缺点：
• • 1）同一节点只能绑定一个同类型事件，如果绑定多次，则只有最后一次生效
• • 2）一旦绑定事件，无法取消事件绑定。

2. DOM2 事件模型

DOM0绑定事件的两种方式都有其局限性。为了解决DOM0事件模型所存在的局限性，DOM2事件模型应运而生。

添加事件绑定
DOM2 事件模型的绑定相对于 DOM0 要稍微复杂一些，并且针对浏览器版本的不同，有两种不同的绑定方式。

1）针对IE8之前的浏览器，使用attachEvent()进行事件绑定。
基本语法如下：

var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
    
    
	// onclick 触发时执行的回调函数
})；

其中，attachEvent()接收两个参数。
① 第一个参数是触发的事件类型，主要事件名称需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。

2）除 IE8 之外的其他浏览器，统一使用 W3C 规范，使用addEventListener()进行事件绑定。

基本语法如下：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    
    
	// click 触发时执行的回调函数
}, true/false)；

其中，addEventListener()接收3个参数。
① 第一个参数是触发的事件类型，主要事件名称不需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。
③ 第三个参数是模型参数，表示事件冒泡或事件捕获，false（默认）表示事件冒泡，true表示事件捕获。

取消事件绑定

DOM2 和 DOM0 相比有一个非常重要的区别，就是使用 DOM2 绑定的事件可以取消事件绑定。如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。

基本语法如下：

var btn = document.getElementById("btn");

btn.attachEvent("onclick",clickFunction(){
    
    })；
btn.addEventListener("click",clickFunction(){
    
    }, true/false)；

function clickFunction(){
    
    
	// 单击事件的回调函数
}

为什么绑定的时候不能使用匿名函数作为回调函数呢？主要原因在于取消事件绑定的时候，语法要求必须传入需要取消的函数名。而匿名函数没有函数名，故无法取消。针对不同浏览器，取消事件绑定也有两种不同方式。

1）针对IE8之前使用attachEvent()绑定的事件，可以使用detachEvent()取消事件绑定。

基本语法如下：btn.detachEvent（"onclick"，函数名）；

2）针对其他浏览器使用addEventListener()绑定的事件，可以使用removeEventListener()取消事件绑定。

基本语法如下：.removeEventListener（"click"，函数名）；

三、掌握JavaScript的事件流模型

1. 事件冒泡

当某 DOM 元素触发某事件时，会从当前 DOM 元素开始，逐个触发其祖先元素的同类型事件，直到 DOM 根节点。

2. 事件捕获

当某 DOM 元素触发某事件时，会从根节点开始，逐个触发其祖先元素的同类型事件，直到当前节点。

3. 事件委派

事件委派也叫事件委托，是将本该添加在节点自身的事件，选择添加到其父节点上，同时委派给当前元素来执行。

a. 事件委派的原理
事件委派的原理就是事件冒泡。由于给多个子元素添加事件，会沿着事件冒泡流触发其父元素的同类型事件，所以可以直接将事件添加在父元素上，并在事件函数中判断单击的是哪一个子元素，进而进行具体操作。

b. 事件委派的作用
事件委派有很大用处，主要体现在如下两点：
（1）提高性能将事件绑定在父节点上，只需要绑定一个事件就可以；而将事件依次添加给子节点，则需要绑定多个事件。因此，事件委派具有更优的性能。

（2）新添加的元素会具有同类型元素的事件如果使用其他方式绑定事件，当页面新增同类的节点时，这些节点不会获得之前绑定的事件。但是，使用事件委派可以让新添加的元素获得之前绑定的事件。

4. 阻止冒泡事件

事件委派的原理就是事件冒泡，但并不是所有的事件冒泡都是对开发有利的，实际开发中，大多情况并不想让子元素的事件影响到父元素。

• 对于 IE8 以前的浏览器，可以将e.cancelBubble属性设为true；
• 对于其他浏览器，则可以调用e.stopPropagation()方法。

5. 阻止默认事件

除了事件冒泡，还有一种情况存在妨碍开发的问题，那就是某些标签的默认事件。比如，a 标签自带跳转页面功能，submit 标签自带提交表单功能，reset 标签自带清除表单功能……这些功能在需要的情况下，都是人们的得力助手。但是，不需要的时候，它们就会影响功能的实现效果。这时候就需要选择取消 HTML 标签的默认事件。

取消默认事件也有两种常用方式。

• 对于 IE8 之前的浏览器，可以将e.returnValue属性设为false；
• 对于 IE8 以外的浏览器，可以调用e.preventDefault()方法。