快捷導(dǎo)航

深入淺析JavaScript中對(duì)事件的三種監(jiān)聽(tīng)方式

更新時(shí)間：2015年09月29日 16:38:40 作者：MaxIE

最近這段時(shí)間因?yàn)槊刻煲薷木W(wǎng)站，為網(wǎng)站做特效，所以看了很多的js接觸事件，自己只會(huì)使用一小部分，有時(shí)用的時(shí)候也比較混亂，現(xiàn)在系統(tǒng)的整理了一下，本篇文章跟大家分享的是JavaScript中對(duì)事件的三種監(jiān)聽(tīng)方式

事件(Event)是JavaScript應(yīng)用跳動(dòng)的心臟，也是把所有東西粘在一起的膠水，當(dāng)我們與瀏覽器中Web頁(yè)面進(jìn)行某些類型的交互時(shí)，事件就發(fā)生了。

第一種監(jiān)聽(tīng)方式，也是最普遍使用的方式，是直接在代碼上加載事件，產(chǎn)生效果：

<table>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text1</td><td>text2</td></tr>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text3</td><td>text4</td></tr>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text5</td><td>text5</td></tr>
</table>

第二種監(jiān)聽(tīng)方式，是使用DOM的方式獲取對(duì)象，并加載事件：

<table>
<tr><td>text1</td><td>text2</td></tr>
<tr><td>text3</td><td>text4</td></tr>
<tr><td>text5</td><td>text5</td></tr>
</table>
<script>
doms = document.getElementsByTagName('tr');
for(i=0;i<doms.length;i++)
{
  doms[i].onmouseover = function()
  {
    this.style.backgroundColor = "red";
  }
  doms[i].onmouseout = function()
  {
    this.style.backgroundColor = "";
  }
}
</script>

第三種監(jiān)聽(tīng)方式，是使用標(biāo)準(zhǔn)的addEventListener方式和IE私有的attachEvent方式，因?yàn)镮E的attachEvent方式在參數(shù)傳遞時(shí)的缺陷，這個(gè)問(wèn)題被搞得稍許有些復(fù)雜了：

<table>
<tr><td>text1</td><td>text2</td></tr>
<tr><td>text3</td><td>text4</td></tr>
<tr><td>text5</td><td>text5</td></tr>
</table>
<script>
doms = document.getElementsByTagName('tr');
function show_color(where)
{
  this.tagName ? where = this : null
  where.style.backgroundColor = "red";
}
function hide_color(where)
{
  this.tagName ? where = this : null
  where.style.backgroundColor = "";
}
function for_ie(where,how)
{
  return function()
  {
    how(where);
  }  
}
for(i=0;i<doms.length;i++)
{
  try
  {
    doms[i].addEventListener('mouseover',show_color,false);
    doms[i].addEventListener('mouseout',hide_color,false);
  }
  catch(e)
  {
    doms[i].attachEvent('onmouseover',for_ie(doms[i],show_color));
    doms[i].attachEvent('onmouseout',for_ie(doms[i],hide_color));
  }
}
</script>

在綁定多個(gè)相同的事件的時(shí)候，前兩種方法會(huì)產(chǎn)生覆蓋，而第三中方法則會(huì)同時(shí)執(zhí)行多個(gè)事件。

您可能感興趣的文章:

相關(guān)文章

layui按條件隱藏表格列的實(shí)例
今天小編就為大家分享一篇layui按條件隱藏表格列的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
原生js二級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了原生js二級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
基于PHP pthreads實(shí)現(xiàn)多線程代碼實(shí)例
這篇文章主要介紹了基于PHP pthreads實(shí)現(xiàn)多線程代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
js實(shí)現(xiàn)字符串的16進(jìn)制編碼不加密
關(guān)于十六進(jìn)制編碼的問(wèn)題在很多情況下都會(huì)用到，所以使用JS寫了個(gè)小程序轉(zhuǎn)換一下
2014-04-04
JavaScript 字符串常用操作小結(jié)(非常實(shí)用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識(shí),包括字符串截取，查找類的方法，對(duì)js字符串操作相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
html判斷當(dāng)前頁(yè)面是否在iframe中的實(shí)例
下面小編就為大家?guī)?lái)一篇html判斷當(dāng)前頁(yè)面是否在iframe中的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
JavaScript使用Web Worker解析CSV文件的操作方法
在處理大型 CSV 文件時(shí),直接在主線程中解析可能會(huì)導(dǎo)致頁(yè)面卡頓,影響用戶體驗(yàn),使用 Web Worker 可以將計(jì)算密集型任務(wù)移到后臺(tái)線程,避免阻塞主線程,從而提升應(yīng)用的響應(yīng)速度,所以本文給大家介紹了JavaScript使用Web Worker解析CSV文件的操作方法,需要的朋友可以參考下
2025-03-03
小程序如何自主實(shí)現(xiàn)攔截器的示例代碼
這篇文章主要介紹了小程序如何自主實(shí)現(xiàn)攔截器,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
分享Bootstrap簡(jiǎn)單表格、表單、登錄頁(yè)面
本文給大家分享Bootstrap簡(jiǎn)單表格、表單、登錄頁(yè)面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-08-08
JavaScript中實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的幾種方法
本文主要介紹了在網(wǎng)頁(yè)開(kāi)發(fā)中,如何使用JavaScript在文本輸入框或富文本編輯器的光標(biāo)位置插入內(nèi)容的實(shí)踐,包括獲取光標(biāo)位置的方法,創(chuàng)建文本節(jié)點(diǎn),操作Selection對(duì)象,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10