03-DOM事件

阳光穿透心脏的1/2处 2023-07-18 02:48 6阅读 0赞

## 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;
        }
    }