javascript原⽣事件总结
  javascript原⽣的事件，总结了⼀下，包括事件流、处理函数、事件对象这⼏样东西。⽽在兼容性⽅⾯，主要是⽼牌ie8以及以下和现代浏览器的差异，也就是ie和DOM事件标准的差异。
1. 事件流
这个事件流ie4和Netscape4提出来的，但是两个公司提出的事件流确实刚好相反的。ie的是事件冒泡，Netscape的是事件捕获。
ie会从触发事件的元素⼀直往上冒泡直到document元素。如图ie8以下包括ie8的
Netscape则是从document元素开始往下传播⼀直到触发事件的元素。如图
⽽DOM标准则建议，将事件流分成三个过程：
⾸先捕获阶段：像Netscape那样往下捕获，但是捕获阶段⽬标元素不会接收到事件。
然后是⽬标阶段：就是触发⽬标元素的事件。
最后是冒泡阶段：就是想ie那样⼦的冒泡。
如图：
但是ie9+，以及别的浏览器所实现的DOM事件流却和标准有点不同。主要是事件流的最顶端延长到window。并且，在捕获阶段⽬标元素也会接受到⼀次事件。如图：
也就是说，⽬标元素的事件会两次触发。
2. 事件处理程序
有三种⽅式给元素绑定事件处理函数。
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" ></a>
<script>
event = event || window.event;
alert(event);
}
</script>
</body>
</html>
c、DOM2事件绑定
主要指的是元素的addEventListener（）和removeEventListener（）。前者绑定，后者删除。
这两个函数都有三个参数，
第⼀个是事件类型，有click，focus，blur等
第⼆个是事件处理函数。
第三个是个布尔值，true代表在捕获阶段调⽤处理函数，false代表在冒泡阶段调⽤处理函数。
要绑定事件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" ></a>
<script>
alert(event);
},false)
</script>
</body>
</html>
假如想解除绑定，有⼈可能会这样：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" ></a>
<script>
alert(event);
},false)
alert(event);
},false)
</script>
</body>
</html>
但是这样是不会成功的。因为函数是⼀个对象，两个匿名函数是不同的对象，不相等。所以匿名函数是没办法解绑的。只能想下⾯这个，个函数⼀个名号。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
html document是什么</head>
<body>
<a href="##" id="a" ></a>
<script>
var handler = function(event){
alert(event);
}
</script>
</body>
</html>
ie8-的浏览器不⽀持DOM2级事件，但是有类似的⽅法attachEvent（）和detachEvent（）；⽤法上是⼀样的，只是因为ie8-只有冒泡过程所以就没有第三个参数。还有第⼀个参数要加个‘on’，⽐如click事件是‘onclick'。另外，函数内this指向window。
3. 事件对象
在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事件类型
4. 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;
5. 焦点事件
focus,focusin 会在得到焦点的元素上触发，focus不冒泡，focusin冒泡。
blur，focusout在失去焦点的元素上触发，blur不冒泡，focuout冒泡。
1. ⿏标和滚轮事件
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
which1、左  2、右  3、中
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的1、3、5、7修正为1；2,6修正为2；
6. 键盘与⽂本事件
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。前两个事件在⽂本框变化之前。
7. 变动事件
DOMSubtreeModified：在DOM结构发⽣任何变化时候触发，在其他变动事件之后触发。冒泡。⽬标是插⼊或者删除的元素的⽗元素。
DOMNodeInserted：在⼀个节点插⼊另⼀个节点时触发。冒泡，⽬标是被插⼊的节点，latedNode是⽗元素，触发时已经插⼊⽂档。
DOMNodeInsertedIntoDocument：在DOMNodeInserted之后触发。在DOMNodeInserted之后触发。不冒泡，⽬标是删除的节点或后代节点，从删除的节点到后代元素的顺序。
DOMNodeRemoved：在⼀个节点移除是触发。冒泡。事件⽬标是被触发的节点，latedNode是⽗元素，触发时未被从⽂档中删除。
DOMNodeRemovedFromDocument：在DOMNodeRemoved之后触发。不冒泡，⽬标是删除的节点或后代节点，从删除的节点到后代元素的顺序。
DOMAttrModified：特性被修改之后触发。
DOMCharacterDataModified：⽂本节点的值变化的时候触发。
这些事件要通过DOM2的绑定⽅法才能绑定成功。ie9+，O9+,FF3+,S3+,C⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。