js event属性

痛定思痛。 2021-07-25 01:08 290阅读 0赞

用来保存事件相关的所有信息的对象，在domtree中该事件触发时，系统自动生成
    
    
    获取event对象
    		function(e){console.log(e)}
    		function(eve){console.log(eve)}	
    		function(event){console.log(event)}
    	
    兼容性写法
    	var event=event||window.event;
    
    属性
    
    	获取事件类型
    		event.type  
    		
    	当前触发事件的类型是否冒泡，如果支持返回true，否则返回false
    		event.bubbles   
    		
    	事件传导至当前节点处于什么状态 
    		event.eventPhase  
    		返回1  事件处于捕获状态
    		返回2  事件处于真正的触发者
    		返回3  事件处于冒泡状态
    	
     	返回事件的触发者
    		event.target   
    		
    	返回事件的监听者(即冒泡或捕获发生的事件)
    		event.currentTarget    
    		
    	获取鼠标横纵坐标
    		event.clientX
    		event.clientY
    		
    	获取键盘阿斯克码值
    		event.keyCode
    	
    	获取键盘案件名
    		event.key
    	
    	获取鼠标按键
    		event.button     //非ie当事件触发时，0为左键，1为中键，2为右键
    								//ie，1为左键，4为中键，2为右键
    
    **event方法**
    
    	非ie中的方法
    
    		阻止事件从当前节点传播到下一个节点
    		能阻止冒泡和捕获
    		阻止捕获事件时，只能在最顶层的事件使用该方法，阻止其之后的事件执行
    			event.stopPropagation()
    		
    		取消当前节点的默认行为
    			event.preventDefault()
    			
    		非ie下event值默认为undefine，ie中event的值为null
    		非ie下可以任意通过dom0和dom2中的参数来使用event，ie中dom0无法使用传参的形式来使用event，dom2可以
    		
    	ie中的相同功能属性:
    		
    		获取事件的真正触发者，等同于target
    			event.srcElement
    				兼容性写法: var target=event.target||event.srcElement
    		
    		阻止当前节点上的冒泡行为(ie无捕获事件)
    			event.cancelBubble=true;  布尔值为true可以取消冒泡
    		
    		结束当前节点的默认行为
    			event.returnValue=false;   布尔值为false阻止默认行为

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.box{ 
    				height: 200px;
    				width:200px;
    				background-color: orange;
    			}
    			.small{ 
    				height:100px;
    				width:100px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<p class="p1">1234</p>
    			<div class="small"></div>
    		</div>
    			<p>aaaa</p>
    		<script>
    			var box=document.querySelector(".box");
    			var p1=document.querySelector(".p1");
    			var small=document.querySelector(".small"); 
    			var p=document.querySelector("p");
    			
    			small.onclick=function(){ 
    				console.log("aaaaaaaa");
    			}
    			box.onclick=function(event){ 
    				console.log("target:"+event.target);
    				console.log("currenttarget:"+event.currentTarget);
    			}
    			
    /* box.οnclick=function(event) { // console.log(event); console.log('box'+event.eventPhase); console.log(event.type+event.bubbles) console.log(event.bubbles) } p1.οnclick=function(event){ console.log('p'+event.eventPhase); } document.body.οnclick=function(event){ console.log("body"+event.eventPhase); } p1.addEventListener("click",function(event){ console.log("冒泡p"+event.eventPhase); },true); box.addEventListener("click",function(event){ console.log("冒泡box"+event.eventPhase) },true) document.body.addEventListener("click",function(event){ console.log("冒泡body"+event.eventPhase) },true)*/
    				function t()
    			{ 
    				event.preventDefault();
    			}
    			
    			p.onclick=function(event)
    			{ 
    				var event=event||window.event;
    				console.log(event);
    			}
    		</script>
    	</body>
    </html>