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)自帶事件參考表供大家參考查詢(xún)：
javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《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)文章
js命名應(yīng)遵循簡(jiǎn)潔、語(yǔ)義化的原則,下面這篇文章主要給大家介紹了關(guān)于JavaScript命名約定的最佳實(shí)踐指南,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫(huà),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
javascript中日期函數(shù)new Date()的瀏覽器兼容性問(wèn)題
這篇文章主要介紹了javascript中日期函數(shù)new Date()的瀏覽器兼容性問(wèn)題,需要的朋友可以參考下2015-09-09
當(dāng)頁(yè)面特別長(zhǎng)的時(shí)候，用戶(hù)想回到頁(yè)面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁(yè)面右下角有個(gè)“返回頂部”的按鈕，用戶(hù)點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶(hù)來(lái)說(shuō)，是一個(gè)比較好的體驗(yàn)。2015-05-05
javascript中去除數(shù)組重復(fù)元素的實(shí)現(xiàn)方法【實(shí)例】
下面小編就為大家?guī)?lái)一篇javascript中去除數(shù)組重復(fù)元素的實(shí)現(xiàn)方法【實(shí)例】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
分享XmlHttpRequest調(diào)用Webservice的一點(diǎn)心得
因?yàn)轫?xiàng)目需要，以后前端、手機(jī)客戶(hù)端調(diào)用ASP.NET的Webservice來(lái)獲取信息.所以這段時(shí)間開(kāi)始看Webservice，試著通過(guò)XmlHttpRequest調(diào)用Webservice，過(guò)程中碰到不少問(wèn)題，也有不少的收獲2012-07-07
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單效果的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript 大數(shù)據(jù)相加的問(wèn)題
寫(xiě)一個(gè)函數(shù)處理大數(shù)據(jù)的相加問(wèn)題，所謂的大數(shù)據(jù)是指超出了整型，長(zhǎng)整型之類(lèi)的常規(guī)數(shù)據(jù)類(lèi)型表示范圍的數(shù)據(jù)。實(shí)現(xiàn)語(yǔ)言不限。2011-08-08
使用JavaScript實(shí)現(xiàn)實(shí)時(shí)搜索建議功能
在我們的技術(shù)旅程中,JavaScript 無(wú)疑是一個(gè)不可或缺的伙伴,這篇文章主要為大家詳細(xì)介紹了如何使用 JavaScript 來(lái)實(shí)現(xiàn)一個(gè)復(fù)雜功能,即實(shí)時(shí)搜索建議,感興趣的可以了解下2024-02-02
JS畫(huà)圖(非VML)--兼容IE/FF...2006-12-12