javaScript事件綁定

標籤：inpu   cli   input   handle   綁定   lis   如何   table   顯示   

事件綁定，就是要對某一個東西進行操作。（因為你想讓他實現什麼效果，所以就得綁定他，哈哈哈！）

要想讓 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事件綁定