JavaScript Dom 綁定事件操作實例詳解
本文實例講述了JavaScript Dom 綁定事件操作JavaScript Dom 綁定事件操作。分享給大家供大家參考，具體如下：
JavaScript Dom 綁定事件
// 先獲取Dom對象，然后進行綁定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
// 誰調(diào)用這個函數(shù),這個this就指向誰
this：當(dāng)前出發(fā)事件的標(biāo)簽、全局對象 window
一、綁定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(this){
// this 帶指當(dāng)前點擊的標(biāo)簽
}
二、綁定方式
<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
// this 帶指當(dāng)前點擊的標(biāo)簽
}
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){ //綁定事件
this.style.backgroundColor = "red";
}
三、綁定方式
一次事件觸發(fā)兩個結(jié)果： addEventListener、w3c提供
標(biāo)簽對象.addEventListener('click',function(){console.log('aaa');},false);
標(biāo)簽對象.addEventListener('click',function(){console.log('bbb');},false);
注：三個參數(shù)：false 代表事件的模型。冒泡模型。
注：三個參數(shù)：true 代表事件的模型。捕捉模型。
例子：
迭代標(biāo)簽：鼠標(biāo)單擊標(biāo)簽后A與a同時出發(fā)事件
<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標(biāo)簽先輸出、A標(biāo)簽后輸出
注：捕捉模型：A標(biāo)簽先輸出、a標(biāo)簽后輸出
PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法
- JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
- js中DOM事件綁定分析
- JS 事件綁定、事件監(jiān)聽、事件委托詳細(xì)介紹
- JavaScript給按鈕綁定點擊事件（onclick）的方法
- js創(chuàng)建一個input數(shù)組并綁定click事件的方法
- javascript事件委托的方式綁定詳解
- Javascript 事件流和事件綁定
- JS動態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行解決
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
- JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
- js事件on動態(tài)綁定數(shù)據(jù),綁定多個事件的方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了JS交換變量的方法,實例分析了javascript通過自定義函數(shù)實現(xiàn)變量交換的使用技巧,需要的朋友可以參考下2015-01-01
JavaScript是一種描述型腳本語言，由瀏覽器進行動態(tài)的解析與執(zhí)行，瀏覽器對于不同的方式有不同的解析順序，詳細(xì)介紹如下，感興趣的朋友可以參考下哈2013-05-05
JavaScript 實現(xiàn)打印,打印預(yù)覽,打印設(shè)置
這篇文章主要介紹了JavaScript 實現(xiàn)打印,打印預(yù)覽,打印設(shè)置的方法及示例分享,需要的朋友可以參考下2014-12-12
JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
script標(biāo)簽屬性type與language使用選擇
很多使用javascript的朋友都有著這樣一個問題:script標(biāo)簽屬性type與language使用應(yīng)如何選擇，為解決此疑惑，本文詳細(xì)整理了一下，需要的朋友可以參考下2012-12-12
javascript Slip.js實現(xiàn)整屏滑動的手機網(wǎng)頁
Slip.js能做什么？Slip.js可以讓你的手機網(wǎng)站像原生手機軟件一樣慣性滾動，手觸圖片輪換等等，對Slip.js感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了用window.onerror捕獲并上報Js錯誤的方法,需要的朋友可以參考下2016-01-01
JavaScript程序設(shè)計高級算法之動態(tài)規(guī)劃實例分析
這篇文章主要介紹了JavaScript程序設(shè)計高級算法之動態(tài)規(guī)劃,結(jié)合實例形式分析了javascript動態(tài)規(guī)劃算法的原理、實現(xiàn)技巧與相關(guān)使用注意事項,需要的朋友可以參考下2017-11-11
本文主要介紹了利用JS輕松實現(xiàn)獲取表單數(shù)據(jù)。方法有別于原始的做法，大家可以試著找原始做法與本文所說方法之間的區(qū)別。有興趣的朋友可以看下，希望對大家有所幫助2016-12-12