初步理解JS中的事件

時間 2019-12-08

標籤初步理解事件欄目 JavaScript 简体版

原文原文鏈接

事件

什麼是事件

JavaScript與HTML之間的交互是經過事件來實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。簡單來講，事件就是瀏覽器告知JavaScript程序用戶的行爲。數組

事件屬性

HTML的元素屬性

在HTML的元素中能夠直接添加事件的屬性,這種方法雖然簡單，可是耦合度高，沒有作到JavaScript和HTML的有效分離。並且只能做用在當前元素。
示例代碼以下：瀏覽器

<body>
<button onclick='sclick'>按鈕</button>//在HTML元素後添加屬性元素，屬性值爲函數名。
<script>
/*設置事件的處理函數*/
function sclick(){
    console .log('這裏竟然是個按鈕')；
}
</script>
</body>

DOM事件屬性

在DOM的的對象，也能夠直接設置事件屬性。這種方法能夠綁定多個元素，而且耦合度較低。
示例代碼以下：函數

<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>
var btn1 = document.getElementByTagNmae（'button'）[0];//定位元素的位置，添加元素的調用值。
/*爲元素設置鼠標綁定事件*/
btn1.onclick = function(){
      console .log（這是竟然是按鈕1）；
}；
/*爲多個元素設置鼠標綁定事件*/
var btn = document.getElementByTagNmae（'button'）；
/*遍歷數組，獲取數組中的每個元素*/
for (var WZ=0;WZ<btn.length;WZ++){
    var bt = btn[WZ];
    bt.onclick = function(){
    console .log('這些都是按鈕')；
    }
}
</script>
</body>

事件監聽器

在DOM對象中，提供了addEventListener（）方法，被稱爲添加事件監聽器，同時也能夠設置事件屬性。該方法存在着瀏覽器的兼容問題。IE8如下的版本不支持。
示例代碼以下：code

<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>//指定元素的位置
var btn1 = document.getElementsByTagNmae（'button'）[0];//定位元素的位置，添加元素的調用值。
//事件屬性沒有‘on’
btn1.addEventListener('click',function(){
    console .log('這裏竟然是個按鈕')；
})；
/*多個相同元素綁定相同事件*/
var btn2 = docunment.getElementsByTagName('button');
for (var WZ = 0;WZ<btn2.length;WZ++){
     var btn = btn2(WZ);
     btn.addEventListener('click',function(){
     console .log('這裏是一堆按鈕')；
     })；
}
</script>
</body>

在IE8如下版本的瀏覽器中，不支持addEventLisner（）的方法，可是提供了attachEvent（）的方法。
示例代碼以下：對象

<body>
<button>按鈕</button>
<script>
var btn1 = document.getElementByTagNmae（'button'）[0];//定位元素的位置，添加元素的調用值。btn1.attachEvent('onclick',function(){
     console .log('IE真特麼麻煩')；
})；
</script>
</body>