1. 程式人生 > >js事件監聽簡介

js事件監聽簡介

http type mouse 清晰 -c 改變 pan 文檔結構 back

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

js事件監聽簡介