1.1 이벤트
이벤트 : 할 수 있습니다 JS는 동작을 감지, 그것은 본질적으로 대화 형 작업입니다.
예를 들면 : 우리는에 버튼을 추가 할 수 있습니다 [ 온 클릭 클릭 이벤트 ] 버튼에 사용자가 클릭 기능을 트리거 할 때 발생합니다.
이벤트의 역할 :
(1)의 다양한 요소 사이의 이벤트에 의해 상호 작용
(2) 사용자와 이벤트를 통해 할 수도 있습니다 상호 작용 페이지 사이
(3) 수 또한 상호 작용 페이지와 (서버에서 느린 압력) 백엔드 간의 이벤트를 통해
PS : 참고 : 이벤트가 발생하면 이벤트는 일반적으로 함수와 함께 사용되어, 상기 기능이 실행된다.
1.2 일이 조각 확산 / 이벤트 전달 / 이벤트 스트림
이벤트가 발생하면, (자식 요소 및 부모 요소의 확산 전파 ). 이 전파는 3 단계로 나누어 져 있습니다
첫 번째 단계 : 타깃 노드로의 윈도우 오브젝트 (상층은 하층에 도달)로 이루어는 "캡처 단계"(라고도 캡처 단계 ).
단계 II : '타겟 위상 "(위상 대상이라고 대상 노드 트리거에 ).
세번째 단계 : 타겟 노드 다시 윈도우에서 도통 (바닥층에서 리턴) 오브젝트는, "버블 위상"(라고도 버블 단계 ).
W3C의 상태 : 이벤트가 버블 링 + 이벤트 캡처 + 이벤트 트리거에게 진짜 사람을 다른 지점은 구성 JS의 이벤트 메커니즘을.
추신 : 특별한 상황에있는 경우, 이벤트 버블 링을 채택한다.
PS : HTML의 이벤트를 처리하는 메커니즘을 버블 링 이벤트 사용합니다. 그
클릭 D2 먼저 실행할 때 D2 바인딩 이벤트 (즉, 실행 TEST2의 기능).
그런 다음에 전달하는 이벤트 버블 링에 이벤트를 사용하여 DOM의 노드 (D1) 및 D1 자신의 바인딩 이벤트를 구현합니다.
PS는 순차 함수 행한다는 순서 바인딩 이벤트 함수 우선
HTML의 이벤트 결함 : 너무 강한 커플 링, 다른 한 곳을 수정은 수정되어야한다.
함수가 성공적으로로드되지 않은 경우, 사용자가 이벤트를 트리거하기 위해, 그것은 오류가 있습니다.
2.2 dom0에의 수준 이벤트
在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名 = function(){需要执行的语句;}
例如：
btn.onclick = function () {console.log(‘按钮被点击’);};
ps：以冒泡机制来处理事件，不存在兼容的问题
DOM0级事件的移除方式：元素. on+事件名=null;eg:btn.οnclick=null;
2.3 DOM2级事件
在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。
语法：元素.addEventListener(type,listener,useCapture)
type:事件类型。【没有on！没有on！没有on！】
listener:监听函数，绑定的函数
useCapture:是否使用捕获机制。如果不写，默认值为false
false:冒泡机制
true：捕获机制
注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。
DOM2级事件的移除方式： node.removeEventListener(type,外部函数名,useCapture)
eg：btn.removeEventListener('click',test,true);
ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。
3.IE浏览器中的【事件绑定】
(1)HTML事件处理程序：等同于非IE
(2)DOM0级事件：等同于非IE
(3)DOM2级事件：
在js脚本中，通过attachEvent函数绑定事件
语法：元素.attachEvent(type,listener)
type:事件类型。【有on！有on！有on！】 listener:监听函数，绑定的函数 注意:如果绑定多个函数，按照函数书写的倒叙执行。
IE下DOM2级事件的移除方式：
元素.detachEvent(type,listener) eg: function test() {alert(111);}
d1.attachEvent("onclick",test);
d1.detachEvent('onclick',test);
ps：匿名函数无法被移除。
4.解决浏览器中关于【事件绑定】兼容性问题
由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢？ 以下为解决方案的思路。绑定事件时： 如果能使用addEventListener方法绑定的，就采用本方法 否则采用attachEvent方法绑定
解绑事件时： 如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑 否则采用detachEvent方法解绑
var Event = {
addEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.addEventListener(type, handler);}
else if (ele.attachEvent) {ele.attachEvent('on' + type, handler);}
else {ele['on' + type] = handler;}
},
removeEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.removeEventListener(type, handler);}
else if (ele.attachEvent) {ele.detachEvent('on' + type, handler);}
else {ele['on' + type] = null;}
}
};
function test() {alert('点击事件');}
Event.addEvent(document.querySelector('div'), 'click', test);
5.鼠标事件
js鼠标事件是指通过鼠标一系列操作（如进入，点击等）来触发的事件。
(1)鼠标事件类型
鼠标单击是触发：click
鼠标双击是触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove
鼠标移入时触发(不冒泡)： mouseenter
鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover
鼠标移出时触发(冒泡)： mouseout
语法：元素.on+鼠标事件名称 = 调用函数
例如：d1.ondblclick = function () { console.log('这是d1');};
(2)鼠标事件原则
a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。
