事件綁定之小測試 onclick && addEventListener
前提:只是一個簡單的小測試,而且 addEventListener 屬于標準綁定函數(shù),IE 中與此不兼容(IE 相應(yīng)的是 attachEvent),所以此次測試先拋棄 IE,使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50
測試頁面:
<!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 標簽中選擇顯示所有屬性:
在其中找到了 attributes 數(shù)組,如下:
這是因為 test1 元素的兩個事件句柄直接寫到了元素中,再往下的列表中找不到更多相關(guān)的信息,此種綁定模式下只能在 firebug 的 DOM 標簽的 attributes 中找到事件句柄。
2,選中 test2 元素:
右側(cè) DOM 標簽:
test2 采用在 javascript 中綁定事件句柄的方式,被作為“用戶自定義屬性”顯示在了 DOM 標簽中,右擊鼠標可以查看相關(guān)信息:
3,選中 test3 元素:
這次在 DOM 標簽中沒有找到任何相關(guān)此元素綁定事件的信息。。。
總而言之,firebug 中在標準綁定事件函數(shù)下(addEventListener),并不好檢測到某個元素已綁定的事件函數(shù),(不要說嘗試打印一下那個元素的 onclick 屬性,addEventListener 綁定和 onclick 綁定毫不相干,此種情況下你會得到 nudefined);如果是在前兩種事件綁定下,可以得到一些簡單信息。
-----
OPERA:
1,在 Opera 的 Dragonfly 中選中 test1 :
在右方的屬性列表中可以找到相關(guān)的信息:
點擊加號同樣可以查看綁定的函數(shù)信息:
想查看某個函數(shù)體的話,有一種簡單的方法,在控制臺中直接輸入:
直接就打印出函數(shù)體,更加的方便!
2,選擇 test2 和 test1 幾乎相同,就不在贅述了;
3,選擇 test3:
右方的屬性標簽里找不到什么了,onclick 和 onmouseover 的值都為 null。
總而言之,Opera Dragonfly 和 Firefox Firebug 表現(xiàn)差不多,對在標準綁定函數(shù)下 某個元素綁定了哪些事件表達得不是很清晰。
-----
CHROME:
Chrome 下就清晰很多了:
1,在調(diào)試工具中選擇 test1(或者 test2,這兩者類似)
看看右側(cè)的信息位:
Chrome 中的 Event Listeners 是一個不錯的小工具,直接羅列出當前選中元素上面已經(jīng)被綁定的監(jiān)聽函數(shù),點擊小黑三角可以查看綁定函數(shù)的信息:
click 中有兩項,第一項是 div#test1,這個就是我們綁定的 onclick 函數(shù)信息;第二項的 document 可以不去看(Chrome 自身的處理);
isAttribute: true :說明此 onclick 函數(shù)句柄是作為元素屬性來對待的(因為我們用的是 onclick = function(){…},不管是 test1 還是 test2);
lineNumber: 18 :說明綁定函數(shù)的位置;
useCapture: false : 說明不使用事件捕獲;其他的語義性很強,就不說了;
同樣,在 Properties 的第一個 HTMLDivElement 列表中,test1 和 test2 中都能看到:
2,選中 test3:
在 Properties 中 onclick 和 onmouseover 都會變成 null,但是 Event Listeners 仍舊是:
但是注意這里的 div#test3:
isAttribute 變成了 false,因為我們沒有使用 onclick 屬性,而是用的 addEventListener。
先記這些吧!寫得有點亂~
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- addEventListener 的用法示例介紹
- window.addEventListener來解決讓一個js事件執(zhí)行多個函數(shù)
- document.addEventListener使用介紹
- JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
- javascript attachEvent和addEventListener使用方法
- 詳解addEventListener的三個參數(shù)之useCapture
- addEventListener()第三個參數(shù)useCapture (Boolean)詳細解析
- 講兩件事:1.this指針的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件處理上的區(qū)別
- addEventListener()與removeEventListener()解析
相關(guān)文章
JS實現(xiàn)懸浮球只在一側(cè)滑動并且是橫屏狀態(tài)下
這篇文章主要介紹了JS實現(xiàn)懸浮球只在一側(cè)滑動 并且是橫屏狀態(tài)下,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08javascript設(shè)計模式 – 訪問者模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 訪問者模式,結(jié)合實例形式分析了javascript訪問者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果
本文主要介紹了javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04