快捷導(dǎo)航

事件綁定之小測試 onclick && addEventListener

更新時間：2011年07月31日 23:30:49 作者：

昨晚回去后，和雷子討論如何才能“檢測”到頁面上某個元素都綁定了哪些事件監(jiān)聽函數(shù)，第一感覺就是應(yīng)該從瀏覽器入手，比如FF，或者Chrome等

開發(fā)工具中應(yīng)該有相應(yīng)的功能，于是測試之:
前提：只是一個簡單的小測試，而且 addEventListener 屬于標(biāo)準(zhǔn)綁定函數(shù)，IE 中與此不兼容（IE 相應(yīng)的是 attachEvent），所以此次測試先拋棄 IE，使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50
測試頁面：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
.test { 
background-color: #FFF; 
border: 1px solid gray; 
height: 100px; 
width: 100px; 
margin: 0 10px 0; 
float: left; 
} 
</style> 
</head> 
<body> 
<div id="test1" class="test" onclick="console.log('test1 : click!');" onmouseover="console.log('test1 : mouseover!');">TEST1</div> 
<div id="test2" class="test">TEST2</div> 
<div id="test3" class="test">TEST3</div> 
<script type="text/javascript"> 
(function(){ 
var $ = function(o){//Simple Tool 
return document.getElementById(o); 
} 
//For Test2: 
$('test2').onclick = function(){console.log('test2 : click!');} 
$('test2').onmouseover = function(){console.log('test2 : mouseover!');} 
//For Test3: 
$('test3').addEventListener('click', function(){ 
console.log('test3 : click!'); 
}, false); 
$('test3').addEventListener('mouseover', function(){ 
console.log('test3 : mouseover!'); 
}, false); 
})(); 
</script> 
</body> 
</html> 

頁面效果如下截圖：

測試代碼中采用了三種最常見的事件綁定方法

FIREFOX:

1，F(xiàn)irefox 的 Firebug 中選中 test1 元素：

右側(cè) DOM 標(biāo)簽中選擇顯示所有屬性：

在其中找到了 attributes 數(shù)組，如下：

這是因為 test1 元素的兩個事件句柄直接寫到了元素中，再往下的列表中找不到更多相關(guān)的信息，此種綁定模式下只能在 firebug 的 DOM 標(biāo)簽的 attributes 中找到事件句柄。

2，選中 test2 元素：

右側(cè) DOM 標(biāo)簽：

test2 采用在 javascript 中綁定事件句柄的方式，被作為“用戶自定義屬性”顯示在了 DOM 標(biāo)簽中，右擊鼠標(biāo)可以查看相關(guān)信息：

3，選中 test3 元素：

這次在 DOM 標(biāo)簽中沒有找到任何相關(guān)此元素綁定事件的信息。。。

總而言之，firebug 中在標(biāo)準(zhǔn)綁定事件函數(shù)下（addEventListener），并不好檢測到某個元素已綁定的事件函數(shù)，（不要說嘗試打印一下那個元素的 onclick 屬性，addEventListener 綁定和 onclick 綁定毫不相干，此種情況下你會得到 nudefined）；如果是在前兩種事件綁定下，可以得到一些簡單信息。

-----

OPERA：

1，在 Opera 的 Dragonfly 中選中 test1 :