javascript是事件驅(qū)動(dòng)的，那什么是事件?事件就是在javascript中被偵測(cè)到DOM元素行為，就稱之為javascript事件。

2、事件的三個(gè)階段

事件的三個(gè)階段分別為：

1、捕獲階段 2、目標(biāo)階段3、冒泡階段。

捕獲的概念：就會(huì)為了找到目標(biāo)DOM元素，會(huì)從上往下一級(jí)一級(jí)查找，直到找到目標(biāo)DOM元素。（window->document->html->body->......->目標(biāo)DOM元素。

冒泡的概念：目標(biāo)事件執(zhí)行后，會(huì)從下往上一級(jí)一級(jí)查找是否有相同事件類型，直到window。

3、事件的綁定方式

1、最簡單綁定方式：btn.οnclick=function(){};

2、W3C標(biāo)準(zhǔn)綁定方式：addEventListener(事件名稱，事件處理程序，useCapture)第三個(gè)參數(shù)是布爾值，如果是true表示捕獲，如果是false就是冒泡，默認(rèn)為冒泡。

3、IE中：attachEvent("on" + 事件名稱, 事件處理程序)這個(gè)方法不支持：捕獲階段。

4、三種綁定事件this的指向問題。

1、 onclick 事件中的this 就是 當(dāng)前對(duì)象

2、addEventListener 事件處理程序中的this：當(dāng)前對(duì)象

3、attachEvent 事件處理程序中的this ： window

5、事件兼容的封裝

var addEvent = function() {//屬于方法檢測(cè)，判斷window是否有該方法if(window.addEventListener) {return function f1(target, type, handler) {target.addEventListener(type, handler);};} else if(window.attachEvent) {return function f2(target, type, handler) {target.attachEvent("on" + type, function() {handler.apply(target);//因?yàn)閠his默認(rèn)指向window，所以通過apply方法來改變this的指向問題//apply使用方法：function.apply(第一個(gè)參數(shù)，第二個(gè)參數(shù)）// 第一個(gè)參數(shù)：表示指向那個(gè)對(duì)象來調(diào)用函數(shù)// 第二個(gè)參數(shù)：是一個(gè)數(shù)組或者是偽數(shù)組的對(duì)象 （這個(gè)參數(shù)是可選的）這個(gè)數(shù)組中的每一項(xiàng)的值，都將作為被調(diào)用函數(shù)的參數(shù)});};} else {return function f3(target, type, handler) {target["on" + type] = handler;};} }();//封裝事件兼容函數(shù)使用到了閉包技術(shù)，目的是：當(dāng)在頁面中多次調(diào)用該函數(shù)，可以避免重復(fù)判斷，提高js執(zhí)行效率。

轉(zhuǎn)載于:https://www.cnblogs.com/lsy0403/p/5862850.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的javascript一个重要知识点：事件。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。