03-DOM事件

分為鼠標(biāo)事件和鍵盤事件
鼠標(biāo)事件：

//onclick 單擊 //ondblclick 雙擊 //onmousedown 按下 //onmouseup 松開//移入//onmouseenter 移入觸發(fā) 不支持冒泡 只會觸發(fā)一次//onmouseover 移入觸發(fā) 支持冒泡（子元素也會被觸發(fā)） 只會觸發(fā)一次//onmousemove 移入觸發(fā) 在元素內(nèi)移動鼠標(biāo)都會觸發(fā)，用于獲取當(dāng)前坐標(biāo)值//移出//onmouseleave 移出觸發(fā) 不支持冒泡//onmouseout 移出觸發(fā) 支持冒泡//鍵盤事件：（按下鍵盤時發(fā)生的狀態(tài)）//onkeyup 某個鍵盤按鍵被松開//onkeydown 某個鍵盤按鍵被按下//onkeypress 某個鍵盤按鍵被按下并松開

html文件：

<h1 id="h1">hello world</h1><button onclick="fun()">click</button><button>click2</button><button class="btn2">dblclick</button><button class="btn3">按下/松開</button><button class="btn4">移入/移出</button><!-- 鍵盤事件 --><div><input type="text" class="input" /></div>

js文件：

//單擊 fun(){ //寫在window.onload方法外，不然則不會執(zhí)行，這個涉及到函數(shù)作用域問題document.getElementById('h1').style.color = "red"; };window.onload = function(){//單擊document.getElementsByTagName("button")[1].onclick = function(){};document.getElementsByTagName("button")[1].onclick = fun2 ; //法1document.getElementsByTagName("button")[1].addEventListener("click",fun2); //法2function fun2(){};//雙擊document.querySelector(".btn2").ondblclick =fun2;//按下、松開document.querySelector(".btn3").onmousedown=function(){document.getElementById("h1").innerHTML = "按鈕按下了";document.getElementById("h1").style.color="blue";}document.querySelector(".btn3").onmouseup=function(){document.getElementById("h1").innerHTML = "按鈕松開了";document.getElementById("h1").style.color="red";};//移入、移出//onmouseover onmouseout//onmouseenter onmouseleave// onmusemovedocument.querySelector(".btn4").onmousemove=function(event){document.getElementById("h1").innerHTML = event.clientX; //當(dāng)前鼠標(biāo)移入與X軸的距離}鍵盤事件 按下鍵盤時發(fā)生的狀態(tài)document.querySelector(".input").onkeyup = function(){ //類似vue里面的雙向數(shù)據(jù)綁定document.getElementById("h1").innerHTML = this.value;} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的03-DOM事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。