事件深入应用

最新推荐文章于 2024-06-26 17:39:49 发布
最新推荐文章于 2024-06-26 17:39:49 发布
阅读量437 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hulongfei1991/article/details/53286347
版权

1.拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {
	
	/*
	onmousedown : 选择元素
	onmousemove : 移动元素
	onmouseup 	: 释放元素
	*/
	
	var oDiv = document.getElementById('div1');
	
	oDiv.onmousedown = function(ev) {
		var ev = ev || event;
		
		var disX = ev.clientX - this.offsetLeft;
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			var ev = ev || event;
			
			oDiv.style.left = ev.clientX - disX + 'px';
			oDiv.style.top = ev.clientY - disY + 'px';
			
		}
		
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <div style="width: 100px; height: 100px; background: green; position: absolute; left: 400px; top: 200px;"></div>
</body>
</html>

2拖拽的问题

1.拖拽的时候，如果有文字被选中，会产生问题
	原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
	解决：
	标准：阻止默认行为return false;
	非标准ie：全局捕获if ( oDiv.setCapture ) {
			oDiv.setCapture();//设置全局捕获 ，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续
发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
		             }
		  释放全局捕获 releaseCapture();
			if ( oDiv.releaseCapture ) {
				oDiv.releaseCapture();
			}





















<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {
	
	/*
	1.拖拽的时候，如果有文字被选中，会产生问题
		原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
			解决：
				标准：阻止默认行为
				非标准ie：全局捕获
	*/
	
	var oDiv = document.getElementById('div1');
	
	oDiv.onmousedown = function(ev) {
		var ev = ev || event;
		
		var disX = ev.clientX - this.offsetLeft;
		var disY = ev.clientY - this.offsetTop;
		
		if ( oDiv.setCapture ) {
			oDiv.setCapture();
		}
		
		document.onmousemove = function(ev) {
			var ev = ev || event;
			
			oDiv.style.left = ev.clientX - disX + 'px';
			oDiv.style.top = ev.clientY - disY + 'px';
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
			//释放全局捕获 releaseCapture();
			if ( oDiv.releaseCapture ) {
				oDiv.releaseCapture();
			}
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	jafldsfjdsjfkl
	<div id="div1"></div>
</body>

</html>



  
  

   
   


  
  





3.拖拽图片





<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	/*
	1.拖拽的时候，如果有文字被选中，会产生问题
		原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
			解决：
				标准：阻止默认行为
				非标准ie：全局捕获
	拖拽图片会有问题，原因，解决的办法同上
	*/
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	oImg.onmousedown = function(ev) {
		var ev = ev || event;
		
		var disX = ev.clientX - this.offsetLeft;
		var disY = ev.clientY - this.offsetTop;
		
		if ( oImg.setCapture ) {
			oImg.setCapture();
		}
		
		document.onmousemove = function(ev) {
			var ev = ev || event;
			
			oImg.style.left = ev.clientX - disX + 'px';
			oImg.style.top = ev.clientY - disY + 'px';
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
			//释放全局捕获 releaseCapture();
			if ( oImg.releaseCapture ) {
				oImg.releaseCapture();
			}
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	jafldsfjdsjfkl
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>













4.拖拽的封装


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				//释放全局捕获 releaseCapture();
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>



    
    

     
     


    
    








5.限制范围的拖拽


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				if ( L < 0 ) {
					L = 0;
				} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
					L = document.documentElement.clientWidth - obj.offsetWidth;
				}
				
				if ( T < 0 ) {
					T = 0;
				} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
					T = document.documentElement.clientHeight - obj.offsetHeight;
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>








6.磁性吸附


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				if ( L < 100 ) {
					L = 0;
				} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
					L = document.documentElement.clientWidth - obj.offsetWidth;
				}
				
				if ( T < 0 ) {
					T = 0;
				} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
					T = document.documentElement.clientHeight - obj.offsetHeight;
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>


      
      

       
       


      
      











7.碰撞检测

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
#img1 { position: absolute; left: 500px; top: 200px;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				var L1 = L;
				var R1 = L + obj.offsetWidth;
				var T1 = T;
				var B1 = T + obj.offsetHeight;
				
				var L2 = oImg.offsetLeft;
				var R2 = L2 + oImg.offsetWidth;
				var T2 = oImg.offsetTop;
				var B2 = T2 + oImg.offsetHeight;
				
				if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
					oImg.src = '1.jpg';
				} else {
					oImg.src = '2.jpg';
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>



       
       

        
        


       
       









8.拖拽改变层大小


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	
	oDiv.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disW = this.offsetWidth;
		var disX = ev.clientX;
		var disL = this.offsetLeft;
		
		var b = '';
		
		if ( disX > disL + disW - 10 ) {
			//alert( 'right' );
			b = 'right';
		}
		if ( disX < disL + 10 ) {
			//alert( 'left' );
			b = 'left';
		}
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			switch( b ) {
				
				case 'left':
					oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';
					oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';
					break;
					
				case 'right':
					oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
					break;
				
			}
			
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
</body>
</html>








9.模拟滚动条




<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	
	oDiv2.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			oDiv2.style.top = ev.clientY - disY + 'px';
			
		}
		
		document.onmouseup = function() {
			
			document.onmousemove = document.onmouseup = null;
			
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2"></div>
    </div>
</body>
</html>



         
         

          
          


         
         













10.模拟滚动条-限制范围


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	
	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
	
	oDiv2.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			var T = ev.clientY - disY;
			
			if ( T < 0 ) {
				T = 0;
			} else if ( T > iMaxTop ) {
				T = iMaxTop;
			}
			
			oDiv2.style.top = T + 'px';
			
		}
		
		document.onmouseup = function() {
			
			document.onmousemove = document.onmouseup = null;
			
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2"></div>
    </div>
</body>
</html>











11.模拟滚动条控制内容滚动


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;}
#div4 { position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	var oDiv4 = document.getElementById('div4');
	
	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
	
	oDiv2.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			var T = ev.clientY - disY;
			
			if ( T < 0 ) {
				T = 0;
			} else if ( T > iMaxTop ) {
				T = iMaxTop;
			}
			
			oDiv2.style.top = T + 'px';
			
			var iScale = T / iMaxTop;
			
			document.title = iScale;
			
			oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px';
			
		}
		
		document.onmouseup = function() {
			
			document.onmousemove = document.onmouseup = null;
			
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2"></div>
    </div>
    <div id="div3">
    	<div id="div4">
        	搜索设置|百度首页|登录注册
新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多»
推荐 : 用手机随时随地上百度
其他人还搜

烤鱼

脆豆腐

川北凉粉

鱼豆腐
妙味课堂 - 首页 javascript培训|前端开发|javascript教程|...
妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时...
www.miaov.com/ 2013-9-20 - 百度快照
在北京市搜索妙味_百度地图

A 妙味正宗川味小吃全景

6条评论 团

地址：北京海淀区成府路28号华联商厦...

电话：(010)62660082

B 妙味居全景

地址：北京昌平区上庄路117号

C 妙味莱早餐

地址：永安路5-6 附近

查看全部8条结果>>

map.baidu.com
妙味教程网
妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站...
www.178code.com/ 2013-10-27 
- 百度快照
妙味_百度百科

读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而...
读音 - 词语解释
baike.baidu.com/ 2013-04-29
妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图
专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、...
bj.city8.com/canyinfuwu/... 2013-07-19 
- 百度快照
妙味茶馆 - Powered by Discuz!
妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、...
42.96.185.107/ 2013-12-16 
- 百度快照
妙味来电话,地址,价格,营业时间(图)-西安-大众点评网
妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ...
www.dianping.com/shop/8833... 2013-06-02 
- 百度快照
妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网
妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网
s.114chn.com/s-gg5icd1i 2013-12-19 
- 百度快照
【妙味来团购】(4.9折)-大众点评网团购西安站
西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。
t.dianping.com/deal/320... 2013-08-29 
- 百度快照
妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制
文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573
pan.baidu.com/share/l...?shareid=279... 2013-08-28 
- 百度快照

12345678910下一页>百度为您找到相关结果约2,450,000个
相关搜索	妙味课堂		妙味课堂javascript		妙味vip		妙味酸奶		妙味烤鱼
味妙烤鱼吧		妙味茶馆		妙味牛奶		妙味学堂		味妙烤鱼吧团购
   结果中找   帮助   反馈意见   举报   高级搜索
©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场
搜索设置|百度首页|登录注册
新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多»
推荐 : 用手机随时随地上百度
其他人还搜

烤鱼

脆豆腐

川北凉粉

鱼豆腐
妙味课堂 - 首页 javascript培训|前端开发|javascript教程|...
妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时...
www.miaov.com/ 2013-9-20 - 百度快照
在北京市搜索妙味_百度地图

A 妙味正宗川味小吃全景

6条评论 团

地址：北京海淀区成府路28号华联商厦...

电话：(010)62660082

B 妙味居全景

地址：北京昌平区上庄路117号

C 妙味莱早餐

地址：永安路5-6 附近

查看全部8条结果>>

map.baidu.com
妙味教程网
妙味教程网为广大网站爱好者提供一站式教程下载服务。免费教程包括JAVA 、PHP、.net、CSS、jquery、flash、AS3、Ps、HTML等。另外还提供高清妙味视频、众多企业站...
www.178code.com/ 2013-10-27 
- 百度快照
妙味_百度百科

读音妙味拼音：miàowèi注音：ㄇㄧㄠˋㄨㄟˋ词语解释美好的品质。《晋书·王接传》："窃见处士王接，岐嶷儁异，十三而孤，居丧尽礼，学过目而...
读音 - 词语解释
baike.baidu.com/ 2013-04-29
妙味,北京妙味的电话_地址_北京地图 - 城市吧街景地图
专业提供妙味地图北京的信息,妙味地址是:西安市兴善寺东街附近,妙味电话是:029-83050973,妙味简介:公交线路: …,妙味周边二手房、租房、购物广场、休闲娱乐、...
bj.city8.com/canyinfuwu/... 2013-07-19 
- 百度快照
妙味茶馆 - Powered by Discuz!
妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!目前主要针对的是javascript培训,同时还提供了css教程、...
42.96.185.107/ 2013-12-16 
- 百度快照
妙味来电话,地址,价格,营业时间(图)-西安-大众点评网
妙味来DIY2选10人已购买 默认点评(0) 全部点评(1) 签到短评(0) 写点评 全部全部(1) 5星5星(0) 4星4星(0) 3星3星(1) 2星2星(0) 1星1星(0) ...
www.dianping.com/shop/8833... 2013-06-02 
- 百度快照
妙味_妙味电话_地址_价格_营业时间_北京海淀114生活网
妙味地址、营业时间、电话、人均价格、折扣价格,妙味介绍简介、公交乘车路线和停车位,以及最新优惠券和用户点评信息,尽在北京海淀114生活网
s.114chn.com/s-gg5icd1i 2013-12-19 
- 百度快照
【妙味来团购】(4.9折)-大众点评网团购西安站
西安妙味来团购,来自点评团西安站。妙味来团购优惠详情:仅售38元,价值78元DIY2选1!只要您的脚步一踏入您就会立刻感觉到放松,享受健康的生活方式!。
t.dianping.com/deal/320... 2013-08-29 
- 百度快照
妙味课堂JavaScript视频教程_免费高速下载|百度云 网盘-分享无限制
文件名:妙味课堂JavaScript视频教程 文件大小:- 分享者:iamxie1127 分享时间:2013-8-28 17:21 下载次数:573
pan.baidu.com/share/l...?shareid=279... 2013-08-28 
- 百度快照

12345678910下一页>百度为您找到相关结果约2,450,000个
相关搜索	妙味课堂		妙味课堂javascript		妙味vip		妙味酸奶		妙味烤鱼
味妙烤鱼吧		妙味茶馆		妙味牛奶		妙味学堂		味妙烤鱼吧团购
   结果中找   帮助   反馈意见   举报   高级搜索
©2013 Baidu 此内容系百度根据您的指令自动搜索的结果，不代表百度赞成被搜索网站的内容或立场
        </div>
    </div>
</body>
</html>



           
           

            
            


           
           












12.模拟滚动条控制其他元素的变化





<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	
	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
	
	oDiv2.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			var T = ev.clientY - disY;
			
			if ( T < 0 ) {
				T = 0;
			} else if ( T > iMaxTop ) {
				T = iMaxTop;
			}
			
			oDiv2.style.top = T + 'px';
			
			var iScale = T / iMaxTop;
			
			document.title = iScale;
			
			oDiv3.style.height = 500 * iScale + 'px';
			
		}
		
		document.onmouseup = function() {
			
			document.onmousemove = document.onmouseup = null;
			
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2"></div>
    </div>
    <div id="div3"></div>
</body>
</html>








































                

        

        

    

  


    

      

        

            

              
                
                  hulongfei1991
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
事件图谱的构建、推理与应用

				
			

			

				

					weixin_45585364的博客
				

				

					07-12
					
					4148
					
				

			

		

		

			
				
点击上方蓝字关注我们事件图谱的构建、推理与应用胡志磊1,2,3,靳小龙1,2,3,陈剑赟4,黄冠利51中国科学院网络数据科学与技术重点实验室，北京 1001902中国科学院计算技...

			
		

	



                

              
                



	

		

			

				
					
JavaScript自定义事件的创建与应用：深入指南

					
最新发布

				
			

			

				

					09-12
				

			

		

		

			
				
通过本文的介绍，你应该对如何在JavaScript中创建和使用自定义事件有了深入的理解。记住，合理地使用自定义事件可以显著提升你的Web应用程序的交互性和可维护性。  通过本文的介绍，你应该对如何在JavaScript中创建...

			
		

	



                


  
              

                


	

		

			

				
					
深入探索图数据技术的应用与实践

				
			

			

				

					努力是为了站在万人之中，成为别人的光
				

				

					05-06
					
					3万+
					
				

			

		

		

			
				
在当今工业领域，图思维方式与图数据技术的应用日益广泛，成为图数据探索、挖掘与应用的坚实基础。本文旨在分享嬴图团队在算法实践应用中的宝贵经验与深刻思考，不仅促进业界爱好者之间的交流，更期望从技术层面为企业在图数据库选型时提供新的视角与思路。

			
		

	





	

		

			

				
					
Netty事件注册机制深入解析

				
			

			

				

					fudaihb的博客
				

				

					05-03
					
					1728
					
				

			

		

		

			
				
本文将深入探讨Netty事件注册机制，首先介绍Netty在现代网络编程中的地位和重要性，随后详细解析事件注册机制对于Netty异步非阻塞模型的意义。通过对Netty的事件注册流程、事件处理与传播、异常处理与资源释放以及性能优化等方面的探讨，读者将能够全面了解Netty事件注册机制的运作原理和优化策略。


			
		

	



		

			
		



	

		

			

				
					
深入探索Netty的事件驱动模型与实现原理

				
			

			

				

					微笑听雨
				

				

					06-22
					
					5186
					
				

			

		

		

			
				
事件驱动模型是一种通过回调机制处理异步事件的设计模式。其主要特点是将事件的检测和处理分离开来，通过事件循环不断监听事件源，一旦检测到事件发生，就调用相应的回调函数处理事件。这种模型在网络编程中尤为适用，因为网络I/O操作通常是非阻塞和异步的。Netty通过其事件驱动模型高效地处理网络I/O操作，适用于高并发和高吞吐量的网络应用。通过理解和应用Netty的事件驱动模型，可以开发出性能优异的网络应用。本文通过详细讲解Netty的事件驱动模型和实际代码示例，帮助你更好地掌握Netty的核心机制。

			
		

	





	

		

			

				
					
深入Symfony事件调度器：掌控应用程序的核心动力

				
			

			

				

					2401_85763803的博客
				

				

					06-26
					
					1328
					
				

			

		

		

			
				
事件驱动编程是一种编程范式，其中事件的产生和处理是程序流程控制的中心。在Symfony中，事件可以是任何应用程序生命周期中的点，例如请求的开始、用户登录、表单提交等。然后，定义一个事件订阅器，它将监听器方法与事件类型关联。return [

			
		

	





	

		

			

				
					
深入理解qemu事件循环 —— 基本框架

				
			

			

				

					Take Easy，Work Hard！
				

				

					08-27
					
					5178
					
				

			

		

		

			
				
qemu利用glib接口实现主线程的事件循环，如果没有glib接口的使用经验，理解起来比较困难，本文试图用glib接口的demo，分解qemu主事件循环。

			
		

	





	

		

			

				
					
labview事件结构的使用

					
热门推荐

				
			

			

				

					shanweikezhang的博客
				

				

					12-01
					
					4万+
					
				

			

		

		

			
				
事件结构，是labview编程结构的精髓所在。它类似于单片机的中断功能，优点在于不占用CPU资源。比如按键按下串口发送数据，以及设置键盘快捷键等等功能，事件结构比查询结构要节省很多系统资源。下面我介绍一下利用事件结构的关键点，基础的自己去看帮助吧。

1，关于事件结构超时连线的问题：事件结构有一个超时事件的输入，当不连接时代表永不超时。这点要十分注意，因为有时候你的事件就够会和其他结构放在一个wh...

			
		

	





	

		

			

				
					
深入分析Spring事件驱动模型

				
			

			

				

					Z先生
				

				

					11-18
					
					4万+
					
				

			

		

		

			
				
聊一聊从观察者模式到Spring的事件驱动模型

			
		

	





	

		

			

				
					
深入分析 Kqueue & Kevent 原理及应用

				
			

			

				

					weixin_38387929的博客
				

				

					07-08
					
					3730
					
				

			

		

		

			
				
转载者注：此篇转载内容是两篇博文的汇总，Kqueue用例部分增加csdn 《春夜喜雨》的demo用例分析，转者认为更容易让读者理解和认知。
常见IO复用技术对比
Wiki上的解释：

kqueue 是一种可扩展的事件通知接口。2000 年 7 月发布的 FreeBSD 4.1 中首次引入了 kqueue，随后也被 NetBSD、OpenBSD、macOS 等操作系统支持。
kqueue 在内核与用户空间之间充当输入输出事件的管线。因此在事件循环的迭代中，进行一次 kevent(2) 系统调用不仅可以接收未决

			
		

	





	

		

			

				
					
ebpf深入理解和应用介绍

				
			

			

				

					网络安全研究
				

				

					04-07
					
					2万+
					
				

			

		

		

			
				
1. ebpf概述
1.1 ebpf发展历史

BPF，及伯克利包过滤器Berkeley Packet Filter，最初构想提出于 1992 年，其目的是为了提供一种过滤包的方法，并且要避免从内核空间到用户空间的无用的数据包复制行为。它最初是由从用户空间注入到内核的一个简单的字节码构成，它在那个位置利用一个校验器进行检查 —— 以避免内核崩溃或者安全问题 —— 并附着到一个套接字上，接着在每个接...

			
		

	





	

		

			

				
					
Android 事件触发机制的深入学习

				
			

			

				

					08-30
				

			

		

		

			
				
 Android 事件触发机制的深入学习是 Android 开发中非常重要的一部分，了解 Android 事件触发机制可以帮助开发者更好地处理用户交互事件，提高应用程序的用户体验。  一、Android 事件触发机制的架构  Android 事件...

			
		

	





	

		

			

				
					
C# 事件的设计与使用深入理解

				
			

			

				

					01-02
				

			

		

		

			
				
 应用场景：事件的应用场景非常广泛，其中最常见的场景是在各个前端控件中的大量触发事件设计。原因是因为 意义：事件成员的使用有利于在程序中对面向对象原则的实现。例如类型的单一职责原则，控制反转原则。设想...

			
		

	





	

		

			

				
					
深入React交互：揭秘事件处理机制

				
			

			

				

					06-22
				

			

		

		

			
				
在React应用中，事件处理是实现用户界面交互的...通过深入理解这些概念，开发者可以更有效地在React应用中实现事件处理逻辑，构建交互性强、性能优异的用户界面。希望本文能够帮助读者深入掌握React的事件处理机制。

			
		

	





	

		

			

				
					
深入解析React事件处理机制：原理与实践

				
			

			

				

					06-30
				

			

		

		

			
				
通过本文的介绍，读者应该对React的事件处理机制有了深入的理解，并能够灵活地应用到React应用的开发中。  本文详细介绍了React事件处理的概述、JSX中的事件处理、事件处理函数的创建、事件对象的传递、事件的冒泡...

			
		

	





	

		

			

				
					
Event1-事件

				
			

			

				

					hulongfei1991的博客
				

				

					11-16
					
					878
					
				

			

		

		

			
				
焦点事件
焦点:使浏览器能够区分用户输入的对象，当一个元素有焦点的时候那么它就可以接受用的输入操作
我们可以通过一些方式可以给元素设置焦点
1.点击
2.tab
3.js
不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点
onfocus:当元素获取到焦点的时候触发
onblur : 当元素失去焦点的时候触发



obj.focus();给指定的元素设置焦点

			
		

	





	

		

			

				
					
Event2-事件

				
			

			

				

					hulongfei1991的博客
				

				

					11-17
					
					855
					
				

			

		

		

			
				
事件捕获
事件捕获就是告诉他监控的是哪一种类型的事件是进去的还是出去的这就是true和false的意义

true&false监控的就是进来的那一下和出去的那一下





无标题文档

div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; pos

			
		

	





	

		

			

				
					
DOM1

				
			

			

				

					hulongfei1991的博客
				

				

					11-14
					
					326
					
				

			

		

		

			
				
DOM概念
DOM:doucment object model 文档对象模型
文档：HTML
文档对象：页面中的元素
文档对象模型：w3c定义
 为了能够让js操作页面中的元素定义出来的一套标准
DOM会把文档看做一个物体，树状结构树中的每一个元素就是元素节点
 同事定义了个很多方法来操作这个树每 一个元素（节点）
如：
   
document
   
document.

			
		

	





	

		

			

				
					
C#深入解析：委托与事件的应用

				
			

			

				

					
				

			

		

		

			
				
通过阅读和实践，开发者能够更深入地理解C#中的委托和事件，以及它们在实现如全球化、异步操作和响应式用户界面等场景中的应用。  委托和事件是C#中实现灵活和高效编程的关键工具。通过掌握这两个概念，开发者可以...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值