JS 事件学习笔记（一）

最新推荐文章于 2022-04-27 23:46:07 发布

Pinky_W

最新推荐文章于 2022-04-27 23:46:07 发布

阅读量537

点赞数

分类专栏： js学习与思考文章标签：前端 javascript

本文链接：https://blog.csdn.net/pinger1225/article/details/38706719

版权

js学习与思考专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、event对象

用来获取事件的详细信息：鼠标位置，键盘按键

获取event对象，兼容写法：var oEvent=ev||event;

eg1: 鼠标点击页面任意位置，弹出坐标。

js代码：

document.οnclick=function(ev){   				//document是最顶层父元素
	var oEvent=ev||event;  				        //火狐(获得ev)和IE(event)兼容写法
	alert(oEvent.clientX+","+oEvent.clientY);  	        //弹出鼠标点击坐标
}

这里是点击document触发事件才能获得坐标位置，可以试试改成html和body，代码失效，因为document是页面的最顶层的元素，html和body必须要有高度才能点击上。

eg2: 跟随鼠标的div

#div2{background: red;height: 100px;width: 100px;position:absolute}

<script type="text/javascript">
	document.οnmοusemοve=function(ev){
		var oEvent=ev||event;
		var oDiv=document.getElementById('div2');
		<span style="color:#FF0000;">var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//火狐IE与谷歌的兼容</span>
		var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
		oDiv.style.left=oEvent.clientX+scrollLeft+'px';  //clientX仅为可视区坐标,所以要加上滚动条距离
		oDiv.style.top=oEvent.clientY+scrollTop+'px';
	}

</script>

<body style="height: 2000px;width: 2000px;">
        <div id="div2">	</div>
</body>

在这里，clientX和clientY是可视区内的鼠标坐标，不是对于整个页面左上角的坐标，所以一定要消除滚动条的影响，

用BOM中的scrollTop和scrollLeft来获取可视区到页面顶部的距离。最好带上，消除隐患。

二：事件流

事件冒泡：

<body>
		<div style="width: 300px;height: 300px;background: red;" οnclick="alert(this.style.background)">
			<div style="width: 200px;height: 200px;background: green;" οnclick="alert(this.style.background)">
				<div style="width: 100px;height: 100px;background: yellow;" οnclick="alert(this.style.background)">
				</div>
			</div>
		</div>
		
这里，如果就这样写，在弹出子元素的背景色，它会一层一层弹出父元素的背景色，一直到html，这就是冒泡。这是令人困扰的。

下面来一个实际的例子，点击按钮div出现，点页面中除了按钮之外的位置，div隐藏，很眼熟的吧~
        <input id="btn1" type="button" value="弹出"/>
		<div id="div1" style="display:none;background: #ccc;width: 100px;height: 100px;"></div>
	</body>

<script type="text/javascript">
			window.οnlοad=function(){
				var oBtn=document.getElementById('btn1');
				var oDiv=document.getElementById('div1');
				
				oBtn.οnclick=function(ev){
					<span style="color:#FF0000;">var oEvent=ev||event;</span>
					oDiv.style.display='block';
				<span style="color:#FF0000;">	oEvent.cancelBubble="true";</span>

 //如果不阻止冒泡，点击按钮并不会使div出现，因为btn是document的子元素，点击它也会触发document的点击函数，所以要消除冒泡，就解决了。
                                }
				
				document.οnclick=function(){
					oDiv.style.display='none';
				}
			}
		</script>

取消冒泡：oEvent.cancelBubble=true;

三、键盘事件

keyCode获取用户按下了哪个按键，具体每个按键的值可以弹出来知道。

ctrlKey,shiftKey,altkey为布尔值，true or false，可以和其他按键一起用，

比如ctrl和enter键发送留言消息：

#txt1{width: 300px;}
#txt2{width: 250px;}
#btn1{width: 50px;}

<script type="text/javascript">
	window.οnlοad=function(){
		var oTxt1=document.getElementById('txt1');
		var oTxt2=document.getElementById('txt2');
		var oBtn=document.getElementById('btn1');
		oBtn.οnclick=function(){
			oTxt1.value+=oTxt2.value+'\n';
			oTxt2.value='';
		}
		oTxt2.οnkeydοwn=function(ev){
			var oEvent=ev||event;
			if(oEvent.ctrlKey&&oEvent.keyCode==13){    //获取按键。ctrl+enter发送
				oTxt1.value+=oTxt2.value+'\n';
				oTxt2.value='';
			}
		}
		//布尔值：ctrlKey,shiftKey,altKey。按下时为true，松开时为false
	}
			
</script>

<body>
	<textarea id="txt1" rows="8"></textarea><br />
	<input id="txt2" />
	<input id="btn1" type="button" value="提交" />
</body>

Pinky_W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 事件学习笔记（一）

一、event对象用来获取事件的详细信息
复制链接

扫一扫

专栏目录

JS 事件 学习笔记（一）

“相关推荐”对你有帮助么？

JS 事件学习笔记（一）