js 事件对象

最新推荐文章于 2023-01-20 09:51:19 发布

hang~~~

最新推荐文章于 2023-01-20 09:51:19 发布

阅读量131

点赞数 3

文章标签： js javascript

本文链接：https://blog.csdn.net/jyh1021342420/article/details/104444110

版权

什么是事件对象

就是当你触发一个事件后，对该事件的描述信息
每个事件都有一个对应的对象来描述这些星系，这个对象就叫事件对象
只要完成事件绑定，系统会自动生产一个事件对象

事件对象的兼容性问题

获取事件对象存在的问题：
标准浏览器通过形参来获取，而IE低版本浏览器不能通过形参来获取，需要通过 window.event 来获取
语法：
var e = ev || window.event
利用逻辑或的短路操作

<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(ev){
            var e = ev || window.event;
            alert(e);
        }
    </script>
</body>

事件对象常用的属性和方法

鼠标事件对象属性

/*
	button 属性
	0  鼠标左键
  	1  鼠标滚轮
  	2  鼠标右键
*/
document.onmousedown = function(ev){
    var e = ev || window.event;
    alert(e.button);
}

2.获取鼠标当前位置

 <style>            
 *{margin: 0px; padding: 0px;}            
 .div1{  
 	width: 200px; 
	height: 200px; 
	background-color: red; 
	position: absolute; 
	left: 100px; top: 100px;}        
 </style>
 <body>
 	<div class="div1"></div>
 <script>
 /*
	 clientX clientY  原点位置：可视窗口的左上角
	 pageX   pageY    原点位置：整个页面的左上角
	 screenX screenY  原点位置：整个屏幕的左上角（电脑屏幕的左上角）
	 offsetX offsetY  原点位置：被按下的元素节点的左上角
 */
         var div1 = document.querySelector('.div1')
                 div1.onclick = function(ev){
	              var e = ev || window.event;            
	              alert(e.clientX + ", " + e.clientY);//原点：可视窗口的左上角            
	              alert(e.offsetX + ", " + e.offsetY);//原点：被按下的元素节点的左上角
	              alert(e.pageX + ", " + e.pageY)//原点：整个页面的左上角
	              alert(e.screenX + ", " + e.screenY)//原点：电脑屏幕的左上角       
                }
 </script>
 </body>

3.修改键

/*
	 shiftKey     shift键
	 ctrlKey      ctrl键
	 altKey       alt键
	 metaKey      windows键
	 
	 默认是false，按下对应的键的时候才true
	 可以和其他的部分结合使用，完成一些快捷键操作
*/
	//修改键 + 鼠标左键	
<script>
	document.onmousedown = function(ev){                    
	var e = ev || window.event;                    
	var arr = [];                
            if(e.shiftKey){                        
               arr.push("shift");                    
            }
            if(e.ctrlKey){                        
               arr.push("ctrl");                    
            }
            if(e.altKey){                        
               arr.push("alt");                    
            }
            if(e.metaKey){                        
               arr.push("windows");                    
            }                                        
               alert(arr);
	}
</script>

4.键码和字符码

/*
	keyCode 键码  只在keydown下支持（支持全键盘）
	键码返回当前按下键的ASIIC码值，但是统一返回大写字母的ASIIC码值
	
	浏览器兼容问题：
	  IE支持which
	    var which = e.keyCode || e.which
	*/
        //keyCode 键码
	window.onkeydown = function(ev){
	     var e = ev || window.event;
	     var which = e.keyCode || e.which;
	     alert(which)
	}

/*
	charCode  字符码  只在keypress下支持（只支持字符键）
	返回的当前按下的这个键对应的ASIIC码，区分大小写
	
	浏览器兼容问题：
	      IE支持which
	      var which = e.charCode  || e.which
	*/

	//charCode  字符码
	window.onkeypress= function(ev){                    
	     var e = ev || window.event;                                                      
	     var which = e.charCode  || e.which;
             alert(which);                
         }

5.target

/*
	触发对象/目标对象
	事件由谁而起的
	e.target (IE低版本浏览器不兼容)
	IE使用 window.event.srcElement
*/
<body>    
	<ul class="ul1">        
	   <li>111</li>        
	   <li>222</li>        
	   <li>            
	      <div>333</div>        
	   </li>        
	   <span>444</span>    
	</ul>

<script>            
    var ul1= document.querySelector(".ul1");            
    ul1.onclick = function(ev){                
    var e = ev || window.event;
    //触发对象                
    var target = e.target || window.event.srcElement;
    alert(target.innerHTML + ", " + target.tagName);            
    }    
</script>
</body>

hang~~~

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件对象

什么是事件对象就是当你触发一个事件后，对该事件的描述信息每个事件都有一个对应的对象来描述这些星系，这个对象就叫事件对象只要完成事件绑定，系统会自动生产一个事件对象事件对象的兼容性问题获取事件对象存在的问题：标准浏览器通过形参来获取，而IE低版本浏览器不能通过形参来获取，需要通过 window.event 来获取语法：var e = ev || window.event...
复制链接

扫一扫