1. 程式人生 > >javaScript事件綁定

javaScript事件綁定

java out 是否 常用 element 事件處理 tac 結構 tex

事件綁定,就是要對某一個東西進行操作。(因為你想讓他實現什麽效果,所以就得綁定他,哈哈哈!)

要想讓 JavaScript 對用戶的操作作出響應,首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數,就是處理用戶操作的函數,不同的操作對應不同的名稱。

在JavaScript中,有三種常用的綁定事件的方法:

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

1、用例子的形式來給大家解釋一下,如何在DOM元素中直接綁定。

單擊一個按鈕,彈出警告框的代碼

<input onclick="myAlert()" type="button" value="點擊我,彈出警告框" />
<script type="text/javascript">
function alert(){
alert("hello,我是警告框");
}
</script>

是不是很簡單,然後繼續吧...

2、在JavaScript代碼中綁定(綁定事件可以使JavaScript代碼與HTML標簽分離,文檔結構清晰,便於管理和開發)

<input id="demo" type="button" value="點擊我,顯示 type 屬性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素
}
</script>

3、綁定事件監聽,綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。

①.addEventListener(eventName,handle,useCapture)。

標準的綁定事件監聽函數的方法

eventName 事件名稱。註意,這裏的事件名稱沒有“ on ”,如鼠標單擊事件 click ,鼠標雙擊事件 doubleclick ,鼠標移入事件 mouseover,鼠標移出事件 mouseout 等。
handle 事件句柄函數,即用來處理事件的函數。
useCapture

Boolean類型,是否使用捕獲,一般用false 。

②.attachEvent(eventName,handle);

elementObject DOM對象(即DOM元素)。
eventName 事件名稱。註意,與addEventListener()不同,這裏的事件名稱有“ on ”,如鼠標單擊事件 onclick ,鼠標雙擊事件 ondoubleclick ,鼠標移入事件 onmouseover,鼠標移出事件 onmouseout 等。
handle 事件句柄函數,即用來處理事件的函數。  

javaScript事件綁定