js事件中级、高级应用

最新推荐文章于 2020-09-12 14:21:35 发布

原创最新推荐文章于 2020-09-12 14:21:35 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨了JavaScript中的事件处理技巧，包括自定义右键菜单、数字输入限制、元素拖拽、事件绑定及兼容性处理等内容。同时，还介绍了如何实现自定义滚动条来改变元素大小、透明度及控制文本滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js事件中级

· 自定义右键菜单

//浏览器右键菜单功能
document.oncontextmenu=function(ev)
{
	var oEvent = ev||event;
	var oDiv = document.getElementById('div1');

	//自定义事件添加
	oDiv.style.display='block';
	oDiv.style.left=oEvent.clientX+'px';
	oDiv.style.top=oEvent.clientY+'px';

	//阻止默认事件
	return false;
};
//点击其他地方菜单消失
document.onclick=function ()
{
	var oDiv = document.getElementById('div1');

	oDiv.style.display='none';
};

· 只能输入数字的文本框

oTxt.onkeydown=function (ev)
	{
		var oEvent = ev||event
		
		//除了退格（8），左右键（37，39），数字（48-57），小键盘数字（96-105），其他的都阻止默认，也就是不能输入
		if(oEvent.keyCode!=8 && oEvent.keyCode!=37 && oEvent.keyCode!=39 && (oEvent.keyCode<48||oEvent.keyCode>57) && (oEvent.keyCode<96||oEvent.keyCode>105) )
		{
			return false;
		}

	};

· 拖拽

        //鼠标按下事件
	oDiv.onmousedown=function (ev)
	{
		var oEvent = ev||event;
		
		//定义变量disX,disY存放鼠标到div之间的（左/上）边距
		disX= oEvent.clientX - oDiv.offsetLeft;
		disY= oEvent.clientY - oDiv.offsetTop;

		//鼠标移动事件
		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;

			//定义（l/t）存放div变化的（左/上）边距
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			//如果div左边距小于0，就让他等于0，这样就不会拖拽出浏览器
			if(l<0)
			{
				l=0;
			}
			//如果div的左边距大于最大左边距，就让他等于最大左边距，这样就不会拖拽出浏览器
			else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
			{
				l=document.documentElement.clientWidth-oDiv.offsetWidth;
			}

			//如果div上边距小于0，就让他等于0，这样就不会拖拽出浏览器
			if(t<0)
			{
				t=0;
			}
			//如果div的上边距大于最大上边距，就让他等于最大上边距，这样就不会拖拽出浏览器
			else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
			{
				t=document.documentElement.clientHeight-oDiv.offsetHeight;
			}

			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};

		//鼠标抬起事件
		document.onmouseup=function()
		{
			//把鼠标移动、抬起事件都清空
			document.onmousemove=null;
			document.onmouseup=null;
		};
		//阻止默认事件（解决FF拖拽有影子的BUG）
		return false;
	};

笔记：

JS事件中级

·默认行为
1.浏览器自带的行为叫默认行为，例如右键菜单
2.contex环境，document.oncontextmenu 鼠标右键事件
3.return false 阻止默认事件
4.onkeydown也是默认事件，可以阻止
例子：自定义右键菜单，只能输入数字的数字框（keyCode48-57、退格、左右键）

·拖拽
1.鼠标按下：onmousedown，鼠标抬起:onmouseup，鼠标移动：onmousemove
2.火狐拖拽BUG，会有影子（加内容就没有），可以阻止默认事件解决
3.防止拖拽拖出浏览器，判断左/上边距小于0就让他等于0 ,判断左边距大于可视区的宽减去div的宽document.documentElement.clientWidth-oDiv.offsetWidth，就让他相等。

js事件高级

· onload

window.onload=function ()
{
	alert('a');
};

window.onload=function ()
{
	alert('b');
};
//两个window.onload ，会执行下面的，就像定义变量 a=1;a=2,a=2会把a=1顶下去

· 事件绑定

	var oBtn = document.getElementById('btn1');

	//绑定事件，多个函数一起执行

	//IE attachEvent(事件名(onclick)，函数)
	/*oBtn.attachEvent('onclick',function()
		{alert('a');};);
	oBtn.attachEvent('onclick',function()
		{alert('b');};);*/

	//FF addEventListener(事件名（click），函数，false)
	oBtn.addEventListener('click',function()
	{
		alert('a');
	},false)
	oBtn.addEventListener('click',function()
	{
		alert('b');
	},false)

· 事件绑定兼容

	if(oBtn.attachEvent)
	{
		oBtn.attachEvent('onclick',function()
		{
			alert('a');
		});
		oBtn.attachEvent('onclick',function()
		{
			alert('b');
		});
	}
	else 
	{
		oBtn.addEventListener('click',function()
		{
			alert('a');
		},false)
		oBtn.addEventListener('click',function()
		{
			alert('b');
		},false)
	}

· 事件绑定函数封装调用

function myAddEvent(obj,ev,fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+ev,fn);
	}
	else
	{
		obj.addEventListener(ev,fn,false);
	}
}

window.onload=function ()
{
	var oBtn = document.getElementById('btn1');

	myAddEvent(oBtn,'click',function()
	{
		alert('a');
	});
	myAddEvent(oBtn,'click',function()
	{
		alert('b');
	});
};

· 拖拽磁性吸附

	//鼠标按下事件
	oDiv.onmousedown=function (ev)
	{
		var oEvent = ev||event;
		
		//定义变量disX,disY存放鼠标到div之间的（左/上）边距
		disX= oEvent.clientX - oDiv.offsetLeft;
		disY= oEvent.clientY - oDiv.offsetTop;

		//鼠标移动事件
		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;

			//定义（l/t）存放div变化的（左/上）边距
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			//如果div左边距小于50，就让他等于0，实现吸附效果
			if(l<50)
			{
				l=0;
			}			
			else if(l>oDiv2.offsetWidth-oDiv.offsetWidth-50)
			{
				l=oDiv2.offsetWidth-oDiv.offsetWidth;
			}

			//如果div上边距小于50，就让他等于0，实现吸附效果
			if(t<50)
			{
				t=0;
			}
			else if(t>oDiv2.offsetHeight-oDiv.offsetHeight-50)
			{
				t=oDiv2.offsetHeight-oDiv.offsetHeight;
			}

			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};

		//鼠标抬起事件
		document.onmouseup=function()
		{
			//把鼠标移动、抬起事件都清空
			document.onmousemove=null;
			document.onmouseup=null;
		};
		//阻止默认事件（解决FF拖拽有影子的BUG）
		return false;
	};

· 事件捕获

	oBtn.onclick=function()
	{
		alert('a');
	};
	//IE下 点浏览器所有的东西都变成弹出a ，把所有地方都捕获
	oBtn.setCapture();

· 拖拽兼容

oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		//解决IE中拖拽会选中文字的问题
		if(oDiv.setCapture)
		{
			//IE
			oDiv.onmousemove=function (ev)
			{
				var oEvent=ev||event;
				var l=oEvent.clientX-disX;
				var t=oEvent.clientY-disY;
				
				oDiv.style.left=l+'px';
				oDiv.style.top=t+'px';
			};
			
			oDiv.onmouseup=function ()
			{
				oDiv.onmousemove=null;
				oDiv.onmouseup=null;
				
				oDiv.releaseCapture();
			};
			
			oDiv.setCapture();
		}
		else
		{
			//Chrome、FF
			document.onmousemove=function (ev)
			{
				var oEvent=ev||event;
				var l=oEvent.clientX-disX;
				var t=oEvent.clientY-disY;
				
				oDiv.style.left=l+'px';
				oDiv.style.top=t+'px';
			};
			
			document.onmouseup=function ()
			{
				document.onmousemove=null;
				document.onmouseup=null;
			};
		}
		
		return false;	//chrome、ff、IE9
	};

· 拖拽兼容函数封装化简

	//鼠标按下事件
	oDiv.onmousedown=function (ev)
	{
		var oEvent = ev||event;

		disX= oEvent.clientX - oDiv.offsetLeft;
		disY= oEvent.clientY - oDiv.offsetTop;

		//解决IE中拖拽会选中文字的问题
		if(oDiv.setCpature)
		{
			//IE 
			div.onmousemove=mouseMove;
			div.onmouseup=mouseUp;
			oDiv.setCpature();
		}
		else
		{
			//FF
			document.onmousemove=mouseMove
			document.onmouseup=mouseUp;
		}
		
		function mouseMove(ev)
		{
			var oEvent = ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};
		function mouseUp()
		{
			this.onmousemove=null;
			this.onmouseup=null;
			if (oDiv.releaseCapture()) 
			{
				oDiv.releaseCapture();
			}
		};

		return false;
	};

· 带框拖拽

	var disX=0;
	var disY=0;

	oDiv.onmousedown=function (ev)
	{
		var oEvent = ev||event;
	
		disX= oEvent.clientX - oDiv.offsetLeft;
		disY= oEvent.clientY - oDiv.offsetTop;

		//鼠标按下的时候创建一个div名字为oBox，把他的className设为class
		//他的宽、高、左边距、上边距都等于div1
		//加入body里面
		var oBox = document.createElement('div');
		oBox.className='class';
		oBox.style.width=oDiv.offsetWidth-2+'px';
		oBox.style.height=oDiv.offsetHeight-2+'px';
		oBox.style.left=oDiv.offsetLeft+'px';
		oBox.style.top=oDiv.offsetTop+'px';

		document.body.appendChild(oBox);

		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;

			//鼠标移动的时候让oBox跟着移动
			oBox.style.left=l+'px';
			oBox.style.top=t+'px';
		};

		document.onmouseup=function()
		{
			document.onmousemove=null;
			document.onmouseup=null;

			//鼠标抬起的时候让div1的左边距上边距等于oBox，并且从body里面删除oBox
			oDiv.style.left=oBox.offsetLeft+'px';
			oDiv.style.top=oBox.offsetTop+'px';
			document.body.removeChild(oBox);
		};
		
		return false;
	};

· 自定义滚动条改DIV的大小

window.onload=function()
{
	var oParent = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	var disX=0;
	

	oDiv2.onmousedown=function (ev)
	{
		var oEvent = ev||event;
	
		disX= oEvent.clientX - oDiv2.offsetLeft;
	

		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;

			//oDiv2变化的左边距
			var l=oEvent.clientX-disX;
			
			//让div2移动不超出div1的范围
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv2.offsetWidth;
			}			

			oDiv2.style.left=l+'px';

			//定义变量存储div2从左到右数值scale是0-1
			var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
			document.title=scale;
			//拖动div2的时候scale变化，div3的宽高也跟着变化。
			oDiv3.style.width=400*scale+'px';
			oDiv3.style.height=400*scale+'px';
		};

		document.onmouseup=function()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};

		
		return false;
	};
};

· 自定义滚动条改DIV的透明度

window.onload=function()
{
	var oParent = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	var disX=0;
	

	oDiv2.onmousedown=function (ev)
	{
		var oEvent = ev||event;
	
		disX= oEvent.clientX - oDiv2.offsetLeft;
	

		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;

			//oDiv2变化的左边距
			var l=oEvent.clientX-disX;
			
			//让div2移动不超出div1的范围
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv2.offsetWidth;
			}			

			oDiv2.style.left=l+'px';

			//定义变量存储div2从左到右数值scale是0-1,在title显示出来
			var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
			document.title=scale;
			//拖动div2的时候scale变化，div3的透明度也跟着变化。
			oDiv3.style.filter='alpha(opacity:'+100*scale+')';
			oDiv3.style.opacity=scale;
		};

		document.onmouseup=function()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};

		
		return false;
	};
};

· 自定义滚动条改控制文字的滚动

window.onload=function()
{
	var oParent = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	var oDiv4 = document.getElementById('div4');
	var disX=0;
	

	oDiv2.onmousedown=function (ev)
	{
		var oEvent = ev||event;
	
		disX= oEvent.clientX - oDiv2.offsetLeft;
	

		document.onmousemove=function(ev)
		{
			var oEvent = ev||event;

			//oDiv2变化的左边距
			var l=oEvent.clientX-disX;
			
			//让div2移动不超出div1的范围
			if(l<0)
			{
				l=0;
			}
			else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
			{
				l=oParent.offsetWidth-oDiv2.offsetWidth;
			}			

			oDiv2.style.left=l+'px';

			//定义变量存储div2从左到右数值scale是0-1,在title显示出来
			var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
			document.title=scale;

			//滚动条滚动的时候，让div4的top变小
			oDiv4.style.top=-scale*(oDiv4.offsetHeight-oDiv3.offsetHeight)+'px'
		};

		document.onmouseup=function()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};

		
		return false;
	};
};

笔记：

JS事件高级应用

·事件绑定
1.事件绑定，可以加很多个函数
IE用：attachEvent(事件名 (onclick)，函数)
FF：addEventListener(事件名 (click)，函数，false) 不带on
if判断解决兼容，IE7下绑定事件顺序会相反
2.函数封装，调用绑定事件
function myAddEvent(obj,ev,fn)
3.解除绑定 detachEvent、removeEventListener
4.绑定事件和this

·高级拖拽
1.限制范围，例子：不能拖出指定对象的div
2.磁性吸附，修改判断语句
3.解决拖拽会选中文字的问题：
事件捕获：setCapture，把所有的事件都抓过来，只有IE7兼容
释放捕获：releaseCapture
4.带框拖拽：创建一个box 给他一个边框，拖动的是box 然后再把div带到box的位置

·自定义滚动条
1.拖拽的应用
2.改大小，透明度
3.控制文字的滚动
4.2和3主要是要用一个变量存放滚动条从左到右的数值变化，用0-1之间表示