js事件監聽簡介

1.什麼是事件監聽？

　　就是讓計算機監視一個事件是否發生。

2.事件和事件處理程序

　　事件是用戶或瀏覽器自身執行的某種動做，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，所以click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。

　　總之，事件就是一個動做瞬間，如鼠標點擊，事件處理程序是一個過程，處理事件發生時的函數的函數。

3.事件監聽器

　　監聽器是一個專門用於對其餘對象身上發生的事件或狀態改變進行監聽和相應處理的對象，當被監視的對象發生狀況時，當即採起相應的行動，即當被監聽對象發生上述事件後，監聽器某個方法當即被執行。

　　事件監聽器，就是當某事件被出發時執行某個事件處理程序，而事件監聽器就是用來監聽某事件是否被觸發。

4.怎麼製做事件監聽即事件處理？

　　要想讓 JavaScript 對用戶的操做做出響應，即對用戶的操做進行監聽並處理，首先要對 DOM 元素綁定事件處理函數。

       在JavaScript中，有三種經常使用的綁定事件的方法：

1. 在DOM元素中直接綁定；
2. 在JavaScript代碼中綁定；
3. 綁定事件監聽函數

 

1）在DOM中直接綁定事件

咱們能夠在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。若是想知道更多事件類型請查看， DOM事件 。

 

1 2 3 4 5 6 7

<input type= "button" value= "click me" onclick= "hello()" >   <script> function hello(){   alert( "hello world!" ); } </script>

2）在JavaScript代碼中綁定事件

在JavaScript代碼中（即 script 標籤內）綁定事件能夠使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。

 

1 2 3 4 5 6 7

<input type= "button" value= "click me" id= "btn" >   <script> document.getElementById( "btn" ).onclick = function (){   alert( "hello world!" ); } </script>

 

上面兩種方法一個屬性便解決了事件監聽和處理，如.onclick = function(){},onclick自己便有事件監聽器的功能，右邊的函數即是事件處理函數。

在js中還有，本身添加監聽器的方法。

3）使用事件監聽綁定事件

綁定事件的另外一種方法是用 addEventListener() 或 attachEvent() 來添加監聽器，在綁定事件與事件處理函數及處理階段。

這兩個方法都須要3個參數：事件名，事件處理函數，布爾值。

這個布爾值爲true,在捕獲階段處理事件，爲false，在冒泡階段處理事件，默認爲false。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>

 

詳細請看轉載。

轉載：http://www.cnblogs.com/starof/p/4067121.html，https://www.jb51.net/article/93752.htm