JavaScript Dom 綁定事件操作實例詳解

 更新時間:2019年10月02日 10:59:57   作者:kevin.Xiang   我要評論
這篇文章主要介紹了JavaScript Dom 綁定事件操作,結合實例形式詳細分析了JavaScript實現dom綁定事件的相關實現方法與操作注意事項,需要的朋友可以參考下

本文實例講述了JavaScript Dom 綁定事件操作JavaScript Dom 綁定事件操作。分享給大家供大家參考,具體如下:

JavaScript  Dom 綁定事件

// 先獲取Dom對象,然后進行綁定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
// 誰調用這個函數,這個this就指向誰

this:當前出發事件的標簽、全局對象 window

一、綁定方式

<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(this){
   // this 帶指當前點擊的標簽
}

二、綁定方式

<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
   // this 帶指當前點擊的標簽
}
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
  myTrs[i].onmouseover = function(){ //綁定事件
  this.style.backgroundColor = "red";
}

三、綁定方式

一次事件觸發兩個結果: addEventListener、w3c提供

標簽對象.addEventListener('click',function(){console.log('aaa');},false);
標簽對象.addEventListener('click',function(){console.log('bbb');},false);

:三個參數:false 代表事件的模型。冒泡模型。

:三個參數:true 代表事件的模型。捕捉模型。

例子:

迭代標簽:鼠標單擊標簽后A與a同時出發事件

<div id='A'>
  <div id='a'></div>
</div>
a.addEventListener('click',function(){console.log('aaa');},false);
A.addEventListener('click',function(){console.log('AAA');},false);

:冒泡模型:a標簽先輸出、A標簽后輸出

:捕捉模型:A標簽先輸出、a標簽后輸出

PS:這里再為大家附上javascript系統自帶事件參考表供大家參考查詢:

javascript事件與功能說明大全:
http://tools.jb51.net/table/javascript_event

更多關于JavaScript相關內容可查看本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • 微信小程序人臉識別功能代碼實例

    微信小程序人臉識別功能代碼實例

    這篇文章主要介紹了微信小程序人臉識別功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • 把JavaScript代碼改成ES6語法不完全指南(分享)

    把JavaScript代碼改成ES6語法不完全指南(分享)

    下面小編就為大家帶來一篇把JavaScript代碼改成ES6語法不完全指南(分享)。小編覺得挺不錯的,現在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • js自動生成的元素與頁面原有元素發生堆疊的解決方法

    js自動生成的元素與頁面原有元素發生堆疊的解決方法

    商品屬性和商品規格是js動態生成的元素,商品擴展信息的兩個文本框是原有的元素,他們發生堆疊,下面是一些解決思路
    2014-09-09
  • js實現類bootstrap模態框動畫

    js實現類bootstrap模態框動畫

    這篇文章主要為大家詳細介紹了js實現類bootstrap模態框動畫的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • JS Tween 顏色漸變

    JS Tween 顏色漸變

    從我寫的as tween改寫的,基本功能跟as里面寫的一樣,只是沒有擴展特定功能的接口(比如alpha2,move2,size2,color2等接口,這些在as tween里面都有實現)。
    2008-12-12
  • 面試常見的js算法題

    面試常見的js算法題

    本文主要介紹了面試常見的js算法題。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • JS基于對象的特性實現去除數組中重復項功能詳解

    JS基于對象的特性實現去除數組中重復項功能詳解

    這篇文章主要介紹了JS基于對象的特性實現去除數組中重復項功能,結合實例形式較為詳細的分析了js基于key值唯一性實現數組去重的具體步驟與相關操作技巧,需要的朋友可以參考下
    2017-11-11
  • js實現簡單頁面全屏

    js實現簡單頁面全屏

    這篇文章主要為大家詳細介紹了js實現簡單頁面全屏的功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • JS設置時間無效問題的解決辦法

    JS設置時間無效問題的解決辦法

    在發送短信息驗證碼的時候要用到js設置時間倒序問題,有時候會導致js失效問題,怎么辦呢?今天小編給大家分享JS設置時間無效問題的解決辦法,需要的朋友參考下吧
    2017-02-02
  • JavaScript實現計數器基礎方法

    JavaScript實現計數器基礎方法

    這篇文章主要為大家詳細介紹了JavaScript實現計數器的基礎方法 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10

最新評論

润升娱乐