JS事件基础

Posted potatolulu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS事件基础相关的知识,希望对你有一定的参考价值。

JS事件基础

event对象和事件冒泡

什么是event对象

用来获取时间的详细信息:鼠标位置,键盘按键

例子:获取鼠标的位置:clientX鼠标点击横坐标;clientY鼠标点击纵坐标

document的本质:document.childNodes[0].tagName

? ——获取页面第一个子节点的值,是DOCTYPE。

事件流

事件冒泡

? 取消冒泡:oEvent.cancelBubble=true

? 例子:仿select控件

? DOM事件流

事件冒泡的含义:当事件发生后,这个事件就要开始传播,因为事件本身没有处理事件的能力,即处理时间的函数未绑定在该事件源上。

  • 例子:仿select控件

window.onload=function(){
				var oDiv=document.getElementById(‘div1‘);
				var oBtn=document.getElementById(‘btn1‘);
				//点击按钮出现下拉框
				oBtn.onclick=function()
				{
					oDiv.style.display=‘block‘;
					//alert(‘按钮被点击了‘);
					
					//取消冒泡
					event.cancelBubble=true;
				}
				//点击界面其他部位下拉框消失
				document.onclick=function()
				{
					oDiv.style.display=‘none‘;
					//alert(‘document被点击了‘)
				}
			}

鼠标事件

鼠标位置

可视区位置:clientX,clientY

例子1:跟随鼠标的Div

? 消除滚动条的影响

? 滚动条的意义——可视区与页面顶部的距离

document.onmousemove=function()
			{
				var oDiv=document.getElementById(‘div1‘);
				var scrollTop=document.documentElement.scrollTop;
				oDiv.style.left=event.clientX+‘px‘;
				//加上scrollTop防止在拖动滚动条时,鼠标与div分开
				oDiv.style.top=event.clientY+scrollTop+‘px‘;
			};

注:但凡用到clientX和clientY时,一定要加上scrollLeft和scrollTop

获取鼠标在页面的绝对位置

封装函数

例子2:一串跟随鼠标的div
  • 封装函数:获取鼠标在页面绝对位置
/*获取鼠标在页面绝对位置*/
			function getPos()
			{
				var scrollTop=document.documentElement.scrollTop;
				var scrollLeft=document.documentElement.scrollLeft;
				
				return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
			}
  • 例子2:一串跟随鼠标的div
function getPos()
			{
				var scrollTop=document.documentElement.scrollTop;
				var scrollLeft=document.documentElement.scrollLeft;
				
				return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
			}
			
			document.onmousemove=function()
			{
				var aDiv=document.getElementsByTagName(‘div‘);
				var pos=getPos();
				
				for(var i=aDiv.length-1;i>0;i--)
				{
					//后面一个Div跟着前面一个Div走
					aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘;
					aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘;
				}
				//第一个Div跟着鼠标走
				aDiv[0].style.left=pos.x+‘px‘;
				aDiv[0].style.top=pos.y+‘px‘;
			};

键盘事件

keyCode(返回按键值的ASCLL码,但FN键不反回值)

获取用户按下键盘的哪个按键

例子:键盘控制Div移动
document.onkeydown=function()
			{
				var oDiv=document.getElementById(‘div1‘);
				
				if(event.keyCode==37)
				{//左
					oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
				};
				if(event.keyCode==38)
				{//上
					oDiv.style.top=oDiv.offsetTop-10+‘px‘;
				};
				if(event.keyCode==39)
				{//右
					oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
				};
				if(event.keyCode==40)
				{//下
					oDiv.style.top=oDiv.offsetTop+10+‘px‘;
				};
			};

其他属性

ctrlKey,shiftKey,altKey 作用(判断ctrl,shift,alt有没有按下)

  • 例子:提交留言

回车 提交

ctrl+回车 提交

			window.onload=function()
			{
				var oTxt1=document.getElementById(‘txt1‘);
				var oBtn=document.getElementById(‘btn1‘);
				var oTxt2=document.getElementById(‘txt2‘);
				
				oBtn.onclick=function()
				{
					oTxt2.value+=oTxt1.value+‘
‘;
					oTxt1.value=‘‘;
				};
				/*点击回车提交事件
				因为点击回车时,焦点在text文本框中,所以keydown是在text文本框上发生*/
				oTxt1.onkeydown=function()
				{
					//ctrl+回车 提交
					if(event.keyCode==13 && event.ctrlKey)
					{
						oTxt2.value+=oTxt1.value+‘
‘;
						oTxt1.value=‘‘;
					}
					//回车提交
					if(event.keyCode==13)
					{
						oTxt2.value+=oTxt1.value+‘
‘;
						oTxt1.value=‘‘;
					}
				};
			};

以上是关于JS事件基础的主要内容,如果未能解决你的问题,请参考以下文章

JS 的事件基础事件侦听与抛发

HLS.js 获取视频片段信息

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

11月8日上午Jquery的基础语法选取元素操作元素加事件挂事件及移除事件

原生js禁止页面滚动

JavaScript基础学习心得02