昨天有位web前端愛好者問關于javascript事件綁定和事件委托的知識，小編今天就來跟大家交流一下這個知識點！

事件綁定：事件是用戶或者瀏覽器自身進行的特定的行為，這些事件都有自己特定的名字，如：點擊，加載，鼠標經過等。用于響應事件并進行特定的處理的函數就是事件處理程序。而事件綁定就是為指定的某個事件綁定指定的事件處理程序。

事件綁定的幾種中方法

方法一：綁定元素屬性

最簡單和向后兼容性最好的事件綁定方法是把事件綁定到元素標識的屬性。

例如：

<button οnclick='myFun()'>click me</button>

<script>

function myFun(){

alert('I get it!');

}

</script>

方法二：綁定對象屬性

把一個函數的引用賦值給一個事件屬性的時候，就發生了綁定。函數的引用是指函數的名稱，但是不帶函數定義中的括號。

例如： document.forms[0].myButton.onclick = myFunc;

應該注意一點：在事件觸發的時候，沒有辦法向事件函數傳遞參數。

方法三： IE支持的attachEvent() 方法

attachEvent() 方法的用法如下所示：

elemObject.attachEvent("eventName", functionReference);

eventName 參數的值是表示事件名稱的字符串，比如 onmousedown、onclick。functionReference 參數是一個不帶括號的函數引用。

方法四：使用 W3C DOM 的 addEventListener() 方法

W3C DOM 規范為 DOM 層次中的每一個結點都定義了一個addEventListener()方法。HTML 元素是 DOM 結點中的一類，在一對元素標識內部的文本結點也是一個結點，也能夠接收事件。

方法的語法如下所示：

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

addEventListener() 方法為指定的結點注冊了一個事件，表示該結點希望處理相應的事件。

第一個參數是一個聲明事件類型的字符串（不帶"on"前綴），比如click，mousedown，和keypress。

第二個參數listenerReference 參數是一個不帶括號的函數引用。

第三個參數captureFlag是boolean類型，指明該結點是否以DOM中所謂的捕捉模式來偵聽事件，對于一個典型的事件偵聽器來說，第三個參數應該為false。

事件委托：利用事件冒泡機制，在最頂層觸發事件的dom對象上綁定一個處理函數。在當有需要很多dom對象要綁定事件的情況下，可以使用事件委托。

寫法如下:

function fn(d) {

document.onclick = function(e) {

var e = e || window.event;

var target = e.srcElement || e.target;

if (target.tagName == “LI”) {

// ……

}

}

}

e.srcElement || e.target: 獲取事件發生時，最初的那個dom元素。

target.tagName：最初的那個dom元素的標簽名字，例如：LI;通過對元素屬性的判斷，例如標簽名，ID ,CLASS等等，來執行不同的處理函數。

這樣做比起每一個元素都綁定一個事件，然后為每一個事件再綁定一個函數效率要高很多。

上例：點擊任何一個LI都會觸發，document的onclick的事件，(注意這里的LI并沒有綁定任何的onclick事件)，這樣就可以理解為一種“委托”。把事件交給document.讓它去處理li點擊后應該執行的語句。

前端愛好者們約定，閱讀后：

if（‘覺得有幫助’）

｛

分享（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享（‘a piece of cake！’）;

｝

else if('看不懂')

{

回復小編（'help me!'）;

}

圖片來源于網絡-------

總結

以上是生活随笔為你收集整理的javascript的事件绑定与事件委托的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。