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