溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript如何實現事件綁定，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
綁定方法：1、使用“對象.on事件名 = function(){代碼}”語句綁定；2、使用“事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);”語句綁定；3、在HTML標簽中使用“onclick”屬性綁定事件。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
1、使用事件源的事件屬性綁定處理程序
使 HTML 和 JS 分離的其中一種方式是通過使用事件源的事件屬性綁定事件處理函數，綁定格式如下：
obj.on事件名 = 事件處理函數
格式中的 obj 為事件源對象。綁定的事件程序通常為一個匿名函數的定義語句，或者是一個函數名稱。
事件源的事件屬性綁定處理程序示例：
oBtn.onclick = function(){//oBtn為事件源對象，它的單擊事件綁定了一個匿名函數定義
alert('hi')
};2、使用addEventListener()綁定處理程序
addEventListener() 是標準事件模型中的一個方法，對所有標準瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下：
事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);
參數“事件名稱”是一個不帶“on”的事件名；參數“是否捕獲”是一個布爾值，默認值為 false，取 false 時實現事件冒泡，取 true 時實現事件捕獲。
通過多次調用 addEventListener() 可以為一個事件源對象的同一個事件類型綁定多個事件處理函數。當對象發生事件時，所有該事件綁定的事件處理函數就會按照綁定的順序依次調用執行。另外，需要注意的是，addEventListener() 綁定的事件處理函數中的 this 指向事件源。
addEventListener() 綁定處理程序示例：
document.addEventListener('click',fn1,false);//click事件綁定fn1函數實現事件冒泡
document.addEventListener('click',fn2,true);//click事件綁定fn2函數實現事件捕獲3、使用HTML標簽的事件屬性綁定處理程序
需要注意的是，使用 HTML 標簽的事件屬性綁定事件處理程序的方式時，事件屬性中的腳本代碼不能包含函數聲明，但可以是函數調用或一系列使用分號分隔的腳本代碼。
實例：使用 HTML 標簽的事件屬性綁定事件處理程序。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用HTML標簽的事件屬性綁定事件處理程序</title> </head> <body> <input type="button" onclick="var name='張三';alert(name);" value="事件綁定測試"/> </body> </html>
上述代碼的 button 為 click 事件的目標對象，其通過標簽的事件屬性 onclick 綁定了兩條腳本代碼進行事件的處理。上述代碼在 Chrome 瀏覽器的運行后，當用戶單擊按鈕時，將彈出警告對話框。
以上是“javascript如何實現事件綁定”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
