溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“javascript如何設置事件監聽”，在日常操作中，相信很多人在javascript如何設置事件監聽問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript如何設置事件監聽”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
設置方法：在HTML的標簽中通過事件屬性進行設置，語法“on+事件名="處理函數"”；2、使用“element.onclick”進行設置；3、使用addEventListener()方法進行設置。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
一、行內綁定
行內綁定：在HTML的標簽中通過事件屬性進行綁定，綁定方式：on+事件名，在將所觸發的事件賦值給該屬性，如下：
<button onclick="alert('123');">點擊</button>二、使用element.onclick進行事件綁定
使用element.onclick進行事件綁定：通過操作DOM元素，為DOM綁定事件（使用形式同行內綁定）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
alert("hello world");
}
}
</script>
</head>
<body>
<button id="btn">點擊</button>
</body>
</html>三、使用addEventListener() 方法
使用 addEventListener() 方法，接受3個參數（要處理的事件名、作為事件處理程序的函數、一個布爾值，這個布爾值為 true 表示在事件捕獲階段調用事件處理程序，為 false 則在事件冒泡階段調用）。有些瀏覽器不支持事件捕獲（如 IE8 及更低版本），所以謹慎綁定捕獲階段的事件監聽器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert("123");
},false);
}
</script>
</head>
<body>
<button id="btn">點擊</button>
</body>
</html>解綁事件的方法：通過元素調用 removeEventListener() 來移除，傳入的參數與添加事件處理程序時相同，第二個參數（事件處理程序函數）必須是同一個（指向地址相同），所以事件處理程序函數應該保存在一個變量中，傳入的是匿名函數則無法移除該事件監聽器。
注意：在IE8及以下版本中，使用attachEvent() 進行事件綁定，接受2個參數（事件處理程序名稱、事件處理程序函數），通過該方法綁定的事件處理程序會在冒泡階段被執行。該方法可以綁定多個事件處理程序，但執行順序與綁定順序相反。
到此，關于“javascript如何設置事件監聽”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
