js事件应用（事件绑定、拖拽吸附、事件捕获）

待我称王封你为后i 2024-02-17 23:23 65阅读 0赞

案例1：事件绑定：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>function myAddEvent(obj, ev, fn) {
    	if(obj.attachEvent) {
    		//IE下
    		//attachEvent(事件名,函数);
    		//detachEvent()  解除绑定
     		obj.attachEvent('on' + ev, fn);
    	} else {
    		//FF Chrome下
    		//addEventListener(事件名,函数,false);
    		//removeEventListener()解除绑定
    		obj.addEventListener(ev, fn, false);
    	}
    }
    
    window.onclick = function() {
    	var oBtn = document.getElementById("btn1");
    	myAddEvent(oBtn, 'click', function() {
    		alert('a');
    	});
    
    	myAddEvent(oBtn, 'click', function() {
    		alert('b');
    	});
    }</script>
    	</head>
    	<body>
    		<input type="button" id = "btn1" value="按钮"/>
    	</body>
    </html>

案例2：拖拽吸附

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
    			#div2 {height: 500px;width: 700px;background: gray;position:relative;}
    		</style>
    		<script>
    			window.onclick = function(){
    				var oDiv = document.getElementById("div1");
    				var oDiv2 = document.getElementById("div2");
    				
    				oDiv.onmousedown = function(ev){
    					var oEvent = ev || event;
    					
    					var disX = oEvent.clientX - oDiv.offsetLeft;
    					var disY= oEvent.clientY - oDiv.offsetTop;
    					
    					//这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
    					document.onmousemove = function(ev){
    						var oEvent = ev || event;
    						var x = oEvent.clientX - disX;
    						var y = oEvent.clientY - disY;
    						
    						//解决div跑出界面的情况
    						if(x < 50){ //吸附原理
    							x = 0;
    						}
    						else if(x > oDiv2.offsetWidth - oDiv.offsetWidth - 50){
    							x = oDiv2.offsetWidth - oDiv.offsetWidth;
    						}
    						
    						if(y < 50){
    							y = 0;
    						}
    					    else if(y > oDiv2.offsetHeight - oDiv.offsetHeight - 50){
    					    	y = oDiv2.offsetHeight - oDiv.offsetHeight;
    					    }
    					    
    					    oDiv.style.left = x + 'px';
    					    oDiv.style.top = y + 'px';
    					}
    					
    					
    					document.onmouseup = function(){
    					    document.onmousemove = null;
    						document.onmouseup = null;
    					}
    					
    					//解决FF问题
    					return false;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "div2">
    			<div id = "div1"></div>
    		</div>
    	</body>
    </html>

案例3：事件捕获

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			window.onclick = function(){
    				var oBtn = document.getElementById("btn1");
    				
    				oBtn.onclick = function(){
    					alert('yes');
    				}
    				
    				//IE下使用
    				//oBtn.setCapture();
    				//oBtn.releaseCapture();
    			}
    		</script>
    	</head>
    	<body>
    		<input type = "button" value="按钮" id = "btn1"/>
    	</body>
    </html>