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

最新推荐文章于 2024-04-16 19:44:59 发布

柏油

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量1.2k

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75201203

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案例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>

柏油

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js事件应用（事件绑定、拖拽吸附、事件捕获）

案例1：事件绑定： function myAddEvent(obj, ev, fn) { if(obj.attachEvent) { //IE下 //attachEvent(事件名,函数); //detachEvent() 解除绑定 obj.attachEvent('on' + ev, fn); } else { //FF Chrome下
复制链接

扫一扫