03-DOM事件

最新推荐文章于 2025-09-27 09:33:46 发布

原创最新推荐文章于 2025-09-27 09:33:46 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

JS基础专栏收录该内容

28 篇文章

订阅专栏

本文深入解析了DOM事件，包括鼠标事件和键盘事件的详细分类及应用。涵盖了单击、双击、按下、松开、移入、移出以及键盘事件的触发机制。通过具体的HTML和JS代码示例，展示了如何在网页中实现这些事件的监听和响应。

03-DOM事件

分为鼠标事件和键盘事件
鼠标事件：

//onclick	单击
//ondblclick	双击
//onmousedown	按下
//onmouseup	松开

		//移入
		//onmouseenter 移入触发 不支持冒泡  只会触发一次
		//onmouseover  移入触发 支持冒泡（子元素也会被触发）  只会触发一次
		//onmousemove  移入触发  在元素内移动鼠标都会触发，用于获取当前坐标值
		
		//移出
		//onmouseleave 移出触发 不支持冒泡
		//onmouseout  移出触发 支持冒泡
		
		//键盘事件：（按下键盘时发生的状态）
		//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方法外，不然则不会执行，这个涉及到函数作用域问题
	document.getElementById('h1').style.color = "red";
};

window.onload = function(){
	//单击
	document.getElementsByTagName("button")[1].onclick = function(){};
	document.getElementsByTagName("button")[1].onclick = fun2 ; //法1
	document.getElementsByTagName("button")[1].addEventListener("click",fun2);  //法2
	function 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
   // onmusemove
   document.querySelector(".btn4").onmousemove=function(event){
        document.getElementById("h1").innerHTML = event.clientX;    //当前鼠标移入与X轴的距离
    }

	////键盘事件  按下键盘时发生的状态
	document.querySelector(".input").onkeyup = function(){ //类似vue里面的双向数据绑定
        document.getElementById("h1").innerHTML = this.value;
    }
}