亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2011年07月31日 23:30:49   作者:  
昨晚回去后,和雷子討論如何才能“檢測”到頁面上某個元素都綁定了哪些事件監(jiān)聽函數(shù),第一感覺就是應(yīng)該從瀏覽器入手,比如FF,或者Chrome等
開發(fā)工具中應(yīng)該有相應(yīng)的功能,于是測試之:
前提:只是一個簡單的小測試,而且 addEventListener 屬于標準綁定函數(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 元素:

image

右側(cè) DOM 標簽中選擇顯示所有屬性:

image

在其中找到了 attributes 數(shù)組,如下:

image

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

2,選中 test2 元素:

image

右側(cè) DOM 標簽:

image

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

image

3,選中 test3 元素:

image

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

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

-----

OPERA:

1,在 Opera 的 Dragonfly 中選中 test1 :

image

在右方的屬性列表中可以找到相關(guān)的信息:

image

點擊加號同樣可以查看綁定的函數(shù)信息:

image

想查看某個函數(shù)體的話,有一種簡單的方法,在控制臺中直接輸入:

image

直接就打印出函數(shù)體,更加的方便!

2,選擇 test2 test1 幾乎相同,就不在贅述了;

3,選擇 test3:

image

右方的屬性標簽里找不到什么了,onclick 和 onmouseover 的值都為 null。

總而言之,Opera Dragonfly 和 Firefox Firebug 表現(xiàn)差不多,對在標準綁定函數(shù)下 某個元素綁定了哪些事件表達得不是很清晰。

-----

CHROME:

Chrome 下就清晰很多了:

1,在調(diào)試工具中選擇 test1(或者 test2,這兩者類似)

image

看看右側(cè)的信息位:

image

Chrome 中的 Event Listeners 是一個不錯的小工具,直接羅列出當前選中元素上面已經(jīng)被綁定的監(jiān)聽函數(shù),點擊小黑三角可以查看綁定函數(shù)的信息:

image

click 中有兩項,第一項是 div#test1,這個就是我們綁定的 onclick 函數(shù)信息;第二項的 document 可以不去看(Chrome 自身的處理);

isAttribute: true :說明此 onclick 函數(shù)句柄是作為元素屬性來對待的(因為我們用的是 onclick = function(){…},不管是 test1 還是 test2);

lineNumber: 18 :說明綁定函數(shù)的位置;

useCapture: false : 說明不使用事件捕獲;其他的語義性很強,就不說了;

同樣,在 Properties 的第一個 HTMLDivElement 列表中,test1 和 test2 中都能看到:

image

2,選中 test3

image

在 Properties 中 onclick 和 onmouseover 都會變成 null,但是 Event Listeners 仍舊是:

image

但是注意這里的 div#test3:

image

isAttribute 變成了 false,因為我們沒有使用 onclick 屬性,而是用的 addEventListener。

先記這些吧!寫得有點亂~

相關(guān)文章

  • 淺談JavaScript中this的指向更改

    淺談JavaScript中this的指向更改

    這篇文章主要介紹了淺談JavaScript中this的指向更改,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • JS實現(xiàn)懸浮球只在一側(cè)滑動并且是橫屏狀態(tài)下

    JS實現(xiàn)懸浮球只在一側(cè)滑動并且是橫屏狀態(tài)下

    這篇文章主要介紹了JS實現(xiàn)懸浮球只在一側(cè)滑動 并且是橫屏狀態(tài)下,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • 詳解Webpack多環(huán)境代碼打包的方法

    詳解Webpack多環(huán)境代碼打包的方法

    這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 客戶端驗證用戶名和密碼的方法詳解

    客戶端驗證用戶名和密碼的方法詳解

    這篇文章主要介紹了客戶端驗證用戶名和密碼 的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 基于Css3和JQuery實現(xiàn)打字機效果

    基于Css3和JQuery實現(xiàn)打字機效果

    最近做項目,有需求實現(xiàn)一個字符逐個出現(xiàn),類似于打字機效果,于是上網(wǎng)搜了相關(guān)資料,接下來,小編就給大家詳細介紹基于Css3和JQuery實現(xiàn)打字機效果,需要的朋友可以參考下
    2015-08-08
  • javascript 可控式透明特效實現(xiàn)代碼

    javascript 可控式透明特效實現(xiàn)代碼

    透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效,必須涉及時間與空間的概念。時間我們可以用setTimeout與setInterval,個人比較喜歡setTimeout,雖然它每次調(diào)用都重復(fù)注冊,但可控性比較好。
    2010-01-01
  • JS中一些高效的魔法運算符總結(jié)

    JS中一些高效的魔法運算符總結(jié)

    這篇文章主要給阿加介紹了關(guān)于JS中一些高效的魔法運算符,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • javascript設(shè)計模式 – 訪問者模式原理與用法實例分析

    javascript設(shè)計模式 – 訪問者模式原理與用法實例分析

    這篇文章主要介紹了javascript設(shè)計模式 – 訪問者模式,結(jié)合實例形式分析了javascript訪問者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • 微信小程序常用的3種提示彈窗實現(xiàn)詳解

    微信小程序常用的3種提示彈窗實現(xiàn)詳解

    這篇文章主要介紹了微信小程序常用的3種提示彈窗實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果

    javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果

    本文主要介紹了javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04

最新評論