javascript原生事件总结

时间 2019-11-12

原文原文链接

　　javascript原生的事件，总结了一下，包括事件流、处理函数、事件对象这几样东西。而在兼容性方面，主要是老牌ie8以及如下和现代浏览器的差别，也就是ie和DOM事件标准的差别。javascript

事件流
这个事件流ie4和Netscape4提出来的，可是两个公司提出的事件流确实恰好相反的。ie的是事件冒泡，Netscape的是事件捕获。
ie会从触发事件的元素一直往上冒泡直到document元素。如图ie8如下包括ie8的

Netscape则是从document元素开始往下传播一直到触发事件的元素。如图

而DOM标准则建议，将事件流分红三个过程：
首先捕获阶段：像Netscape那样往下捕获，可是捕获阶段目标元素不会接收到事件。
而后是目标阶段：就是触发目标元素的事件。
最后是冒泡阶段：就是想ie那样子的冒泡。
如图：

可是ie9+，以及别的浏览器所实现的DOM事件流却和标准有点不一样。主要是事件流的最顶端延长到window。而且，在捕获阶段目标元素也会接受到一次事件。如图：

也就是说，目标元素的事件会两次触发。

事件处理程序
有三种方式给元素绑定事件处理函数。
a、HTML属性
<a onclick="alert('click')"></a>
这样使用在函数里面直接能够调用event，this指向当前元素。可是这种方式通常不适用。

b、js中元素属性
这种方式的兼容性好，全部浏览器都支持。可是有一个兼容性问题。那就是ie8-的事件对象是做为window的属性而不是做为参数传进去的。因此要像下面这样写。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
    <script>
        document.getElementById('a').onclick = function(event){
            event = event || window.event;
            alert(event);
        }

    </script>
</body>
</html>

c、DOM2事件绑定
主要指的是元素的addEventListener（）和removeEventListener（）。前者绑定，后者删除。
这两个函数都有三个参数，
第一个是事件类型，有click，focus，blur等
第二个是事件处理函数。
第三个是个布尔值，true表明在捕获阶段调用处理函数，false表明在冒泡阶段调用处理函数。
要绑定事件：css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
    <script> document.getElementById('a').addEventListener('click',function(event){ alert(event); },false) </script>
</body>
</html>

假如想解除绑定，有人可能会这样：html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
    <script> document.getElementById('a').addEventListener('click',function(event){ alert(event); },false) document.getElementById('a').removeEventListener('click',function(event){ alert(event); },false) </script>
</body>
</html>

可是这样是不会成功的。由于函数是一个对象，两个匿名函数是不一样的对象，不相等。因此匿名函数是没办法解绑的。只能想下面这个，个函数一个名号。java

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
    <script>
        var handler = function(event){ alert(event); } document.getElementById('a').addEventListener('click',handler,false) document.getElementById('a').removeEventListener('click',handler,false) </script>
</body>
</html>

ie8-的浏览器不支持DOM2级事件，可是有相似的方法attachEvent（）和detachEvent（）；用法上是同样的，只是由于ie8-只有冒泡过程因此就没有第三个参数。还有第一个参数要加个‘on’，好比click事件是‘onclick'。另外，函数内this指向window。jquery

事件对象
chrome

在js中全部的事件对象都继承自Event。在chrome（左）和firefox（右）中Event对象的样子。　　　　

　　　　能够看到在浏览器中Event对象仍是有点区别的。可是下面的属性和方法是公用的。浏览器

bubbles	是否冒泡
cancelable	是否能够取消默认行为
currentTarget	目前元素
target	目标元素
defaultPrevented	是否已被阻止默认行为
type	事件类型
eventPhase	事件流哪一个阶段1捕获 2目标 3冒泡
detail	一些信息
trusted	js建立的为false，浏览器建立为true
view	等同于window
preventDefault()	阻止默认行为
stopPropagation()	阻止冒泡和捕获
stopImmediatePropagation()	当即阻止冒泡和捕获

　　　　在ie8—中事件对象，是这个样子：框架

cancelBubble	是否取消冒泡，为true先顶一下stopPropagation（）
returnValue	返回值，为false至关于preventDefault（）
srcElement	目标元素，至关于target
type	事件类型

UI事件
load：页面加载完、img图像加载完、全部框架加载完、嵌入内容加载完在object元素触发。在ie9+浏览器中，<script>元素也会触发该事件。
注意：页面加载完表示，全部的外部css，js，图像等都下载完。
　　img元素，一旦加了src属性就开始下载。
　　script元素必定要插入文档才开始下载。
这个事件的事件对象不会包含什么信息，除了在兼容dom的浏览器中有target信息。
　　在ie8以前没有加进文档的图像不会生成event对象。
unload：文档被彻底卸载后触发。
resize：浏览器窗口被调整大小时。
注意：ie8前event不提供任何属性。
　　兼容DOM的浏览器会提供target=document。
　　Firefox老版本会在中止改变以后才触发，如今全部浏览器都是每变一个像素都会触发一次。
scroll：在window对象发生，表示的是文档被滚动。能够经过body元素的scrollLeft和scrollTop来监控。
注意：通过测试如今chrome，safari支持body上的这两个属性，ie11，firefox支持documentElement上的这两个属性。因此要这样写scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

焦点事件
focus,focusin 会在获得焦点的元素上触发，focus不冒泡，focusin冒泡。
blur，focusout在失去焦点的元素上触发，blur不冒泡，focuout冒泡。

鼠标和滚轮事件
click：能够经过鼠标或键盘触发，冒泡。
dblclick:经过双击鼠标主按钮触发（有些浏览器中键和右键也能够）。冒泡。
　　触发dbclick的过程：mousedown--mouseup--click--mousedown--mouseup--click--dblclick
　　可是ie8及之前的浏览器中有bug：mousedown--mouseup--click--mouseup--dblclick
mousedown/mouseup:按下任意的鼠标键/释放。冒泡。
　　注意：当在一个元素按下会触发这个元素的mousedown，若是不释放移动到另外一个元素在释放，就会触发后一个元素的mouseup。

mouseenter：从元素外部进入元素内部触发。不冒泡。进入后代元素不触发。ie、Firefox9+、Opera支持。
mouseleave：从元素内部移出元素是触发。不冒泡。进入后代元素不触发。ie、Firefox9+、Opera支持。

mouseover：进入元素内部时触发。冒泡。
mouseout：移出元素时触发。冒泡。移进后代元素也触发。

mousemove：在元素内部移动的时候。冒泡。

在这些事件中，event事件对象会有一些新增的属性。
在DOM标准中。

clientX、clientY
which	一、左　　二、右　　三、中
detail	单击次数
ctrlKey
altKey
metaKey
shiftKey
pageX、pageY
screenX、screenY

在ie8以及之前的浏览器

clientX、clientY
button	0：没按下，1：主鼠标，2：次鼠标，3：同时按下主次按钮，4：中间按钮，5：主和中间按钮，6：按下次和右鼠标，7：三个都按下
offsetX、offsetY
ctrlKey
altKey
metaKey
shiftKey
fromElement	mouseover
toElement	mouseout

jquery中对统一用which来代替button和which。

if ( !event.which && button !== undefined ) { event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); }

用位与运算，把button的一、三、五、7修正为1；2,6修正为2；dom

键盘与文本事件
keydown：按下键盘任意键触发，按着不放会重复触发。
keyup：释放键盘按键是触发。
　　上面的事件都有一个keyCode，表示按下键的键码。数字字母是ASCII中的数字和小写字母的编码。charCode为0.
在Firefox和Opera中，按下分号keyCode为ASCII的59；ie，Safari和chreome中为键码186.

keypress：按下字符键是触发。ie9+的浏览器，charCode等于ASCII码。此时的keyCode不肯定，不一样浏览器多是0，键码或ASCII码。
在ie8和Opera中，keyCode等于ASCII码。因此跨浏览器：
　　
1. ```
charCode = event.charCode || event.keyCode
```
这三个事件的顺序是keydown--keypress--keyup。前两个事件在文本框变化以前。
变更事件DOMSubtreeModified：在DOM结构发生任何变化时候触发，在其余变更事件以后触发。冒泡。目标是插入或者删除的元素的父元素。DOMNodeInserted:在一个节点插入另外一个节点时触发。冒泡，目标是被插入的节点，event.relatedNode是父元素，触发时已经插入文档。DOMNodeInsertedIntoDocument：在DOMNodeInserted以后触发。在DOMNodeInserted以后触发。不冒泡，目标是删除的节点或后代节点，从删除的节点到后代元素的顺序。DOMNodeRemoved：在一个节点移除是触发。冒泡。事件目标是被触发的节点，event.relatedNode是父元素，触发时未被从文档中删除。DOMNodeRemovedFromDocument：在DOMNodeRemoved以后触发。不冒泡，目标是删除的节点或后代节点，从删除的节点到后代元素的顺序。DOMAttrModified：特性被修改以后触发。DOMCharacterDataModified：文本节点的值变化的时候触发。这些事件要经过DOM2的绑定方法才能绑定成功。ie9+，O9+,FF3+,S3+,C支持。