JavaScript Dom 綁定事件操作實例詳解
本文實例講述了JavaScript Dom 綁定事件操作JavaScript Dom 綁定事件操作。分享給大家供大家參考，具體如下：
JavaScript Dom 綁定事件
// 先獲取Dom對象，然后進行綁定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
// 誰調(diào)用這個函數(shù),這個this就指向誰
this：當前出發(fā)事件的標簽、全局對象 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";
}
三、綁定方式
一次事件觸發(fā)兩個結(jié)果： addEventListener、w3c提供
標簽對象.addEventListener('click',function(){console.log('aaa');},false);
標簽對象.addEventListener('click',function(){console.log('bbb');},false);
注：三個參數(shù)：false 代表事件的模型。冒泡模型。
注：三個參數(shù)：true 代表事件的模型。捕捉模型。
例子：
迭代標簽：鼠標單擊標簽后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標簽先輸出、A標簽后輸出
注：捕捉模型：A標簽先輸出、a標簽后輸出
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)聽、事件委托詳細介紹
- 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)文章
js命名應(yīng)遵循簡潔、語義化的原則,下面這篇文章主要給大家介紹了關(guān)于JavaScript命名約定的最佳實踐指南,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)首頁進度加載動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
javascript中日期函數(shù)new Date()的瀏覽器兼容性問題
這篇文章主要介紹了javascript中日期函數(shù)new Date()的瀏覽器兼容性問題,需要的朋友可以參考下2015-09-09
當頁面特別長的時候，用戶想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個“返回頂部”的按鈕，用戶點擊一下，就可以回到頂部，對于用戶來說，是一個比較好的體驗。2015-05-05
javascript中去除數(shù)組重復(fù)元素的實現(xiàn)方法【實例】
下面小編就為大家?guī)硪黄猨avascript中去除數(shù)組重復(fù)元素的實現(xiàn)方法【實例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
分享XmlHttpRequest調(diào)用Webservice的一點心得
因為項目需要，以后前端、手機客戶端調(diào)用ASP.NET的Webservice來獲取信息.所以這段時間開始看Webservice，試著通過XmlHttpRequest調(diào)用Webservice，過程中碰到不少問題，也有不少的收獲2012-07-07
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單效果的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
寫一個函數(shù)處理大數(shù)據(jù)的相加問題，所謂的大數(shù)據(jù)是指超出了整型，長整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實現(xiàn)語言不限。2011-08-08
在我們的技術(shù)旅程中,JavaScript 無疑是一個不可或缺的伙伴,這篇文章主要為大家詳細介紹了如何使用 JavaScript 來實現(xiàn)一個復(fù)雜功能,即實時搜索建議,感興趣的可以了解下2024-02-02
JS畫圖(非VML)--兼容IE/FF...2006-12-12