路漫漫其修远兮：js的成长经历（九）—— js事件基础

最新推荐文章于 2019-08-26 12:55:45 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2019-08-26 12:55:45 发布

阅读量231

点赞数

文章标签： javaScript js事件 web前端事件

本文链接：https://blog.csdn.net/qq_42038623/article/details/98435858

版权

事件绑定

什么是事件绑定？
可以在一个事件上增加多个函数，详细如下

<body>
		<input type="button" name="" id="btn1" value="按钮" />
		<script type="text/javascript">
			var btn=document.getElementById("btn1");
			// 事件绑定方法：attachEvent(事件,函数):兼容火狐和IE
			/* btn.attachEvent(onclick,function(){
				alert("被点击了a")
			})
			btn.attachEvent(onclick,function(){
				alert("被点击了b")
			}) */
			
			//事件绑定方法:addEventListener(事件名，函数布尔值):兼容谷歌,360等
			btn.addEventListener("click",function(){
				alert("被点击了a")
			});
			btn.addEventListener("click",function(){
				alert("被点击了b")
			})
			
			//没有用事件绑定,前面一个事件被覆盖
			/* btn.οnclick=function(){
				alert("被点击了a")
			}
			btn.οnclick=function(){
				alert("被点击了b")
			} */
		</script>
	</body>

可以实现点击一次按钮，执行两个函数里面的内容，
需要注意的是attachEvent方法和addEventListener的使用，这是一个兼容性的问题
兼容性：IE支持attachEvent而不支持addEventListener，否则会报错；而谷歌火狐则支持addEventlistener。所以存在兼容性的问题。

事件冒泡

事件冒泡就是当事件的对象有父子级关系时，当执行子级事件后，父级事件也会因为事件冒泡，也会执行，因此，大多数时候，事件冒泡需要消除。
使用event.cancelBubble = true;方法来消除事件冒泡
案例如下

<body>
		<button type="button" id="btn">显示</button>
		<div id="box">

		</div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var div = document.getElementById("box")
			btn.onclick = function(e) {
				var oEvent = e || event;
				div.style.display = "block";
				// alert("按钮被点击了");
				
				//阻止事件冒泡
				oEvent.cancelBubble = true;
			}
			document.onclick = function() {
				div.style.display = "none";
				// alert("document被点击了");
			}
		</script>
	</body>

事件对象的兼容性

在火狐或者谷歌浏览器下，使用事件的方法是将函数中传进来的e；
而在IE浏览器下，使用事件不需要传进e，直接使用event。
所以为了避免事件的兼容性问题
var oEvent = e || event;
一般使用这样的方法来消除浏览器对事件的兼容

鼠标点击事件

鼠标的位置

oevent.clientX：返回鼠标的横坐标的位置
oevent.clientY：返回鼠标的纵坐标的位置

<body>
		<script type="text/javascript">
			document.onclick=function(e){
				//IE支持event
				//火狐不支持event,必须从函数中传进一个事件
				//所以一般避免兼容性,会使用var oevent=e||event;
				var oevent=e||event;
				alert("鼠标横坐标是："+oevent.clientX+"  纵坐标是："+oevent.clientY)
			}
		</script>
	</body>

鼠标跟踪

鼠标跟踪是实现对象跟着鼠标移动，其实就是在onmousemove函数中将改对象的横纵坐标都赋值为鼠标的横纵对象
实现如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.onclick=function(e){
				//IE支持event
				//火狐不支持event,必须从函数中传进一个事件
				//所以一般避免兼容性,会使用var oevent=e||event;
				var oevent=e||event;
				alert("鼠标横坐标是："+oevent.clientX+"  纵坐标是："+oevent.clientY)
			}
		</script>
	</body>
</html>

鼠标跟踪小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 10px;
				height: 10px;
				background-color: #FF69B4;
				position: absolute;
			}
		</style>
	</head>
	<body>

		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>


		<script type="text/javascript">
			function getPos(e) {
				//避免鼠标滚动
				var scorllTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scorllLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				return {
					x: e.clientX + scorllLeft,
					y: e.clientY + scorllTop
				};
			}

			document.onmousemove = function(e) {
				var div = document.getElementsByTagName("div");
				var oEvent = e || event;
				var pos = getPos(oEvent);
				for (var i = div.length - 1; i > 0; i--) {
					div[i].style.left = div[i - 1].offsetLeft + "px";
					div[i].style.top = div[i - 1].offsetTop + "px";
				}
				div[0].style.left = pos.x + "px";
				div[0].style.top = pos.y + "px";

			}
		</script>
	</body>
</html>

实现效果如下
在这里插入图片描述

（ps:可以将div小方块换成自己喜欢的图片 ^ _ ^ ）

小案例——自定义右菜单

1.实现点击鼠标右键弹出自己的菜单
2.实现点击空白时,菜单消失
3.实现点击菜单时,菜单不会消失（事件冒泡）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				width: 100px;
				height: 150px;
				background: #ADD8E6;
				list-style: none;
				position: absolute;
				padding-left: 5px;
				display: none;
			}
			li{
				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>abc</li>
			<li>abc</li>
			<li>abc</li>
			<li>abc</li>
		</ul>
		
		<script type="text/javascript">
			//点击鼠标右键弹出自己的菜单
			document.oncontextmenu=function(e){
				var oEvent=e|| event;
				
				ull[0].style.display="block";
				ull[0].style.left=oEvent.clientX+"px";
				ull[0].style.top=oEvent.clientY+"px";
				//阻止默认行为
				return false;
				
				
								
			}
			//点击空白时,菜单消失
			document.onclick=function(){
				var ull=document.getElementsByTagName("ul");
				ull[0].style.display="none";
			}
			//点击菜单时,菜单不会消失
			var ull=document.getElementsByTagName("ul");
			ull[0].onclick=function(e){
				var oEvent=e|| event;
				//阻止冒泡
				oEvent.cancelBubble = true;
			}
			
		</script>
	</body>
</html>

效果如下
在这里插入图片描述

键盘事件

键盘控制移动

使用 oEvent.keyCode==“数字” 来监听按下了键盘的哪一个键
数字是ASCII码值

<body>
		<div id="box">
			
		</div>
		
		<script type="text/javascript">
			document.onkeydown=function(e){
				var oEvent=e|| event;
				var div =document.getElementById("box");
				if(oEvent.keyCode==37){
					div.style.left=div.offsetLeft-10+"px";
				}
				else if(oEvent.keyCode==39){
					div.style.left=div.offsetLeft+10+"px";
				}
			}
			
		</script>
	</body>

可以控制div方块左右移动

键盘提交

就是按下回车或者 ctr + 回车键，来对信息进行提交
本案例借用了前几篇文档中的运动封装：animate.js
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.ull {
				width: 300px;
				height: 400px;
				background-color: lightblue;
				/* 超出部分显示滚动条 */
				margin: 20px auto;
				border: 5px solid #8A2BE2;
				overflow-y: auto;
				/* 让字符换行显示 */
				word-wrap: break-word;


			}

			.ull li {
				border-bottom: 1px dashed #999;
				list-style: none;
				padding: 4px;
				padding-left: 20px;
				/* overflow: hidden; */
				opacity: 0;

			}

			.txt {
				margin: 20px 10px;
			}
		</style>
		<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<textarea rows="4" cols="40" class="txt"></textarea>
		<button type="button" class="btn">发布</button>
		<ul class="ull">

		</ul>

		<script type="text/javascript">
			//获取各个元素的节点
			var Otext = document.querySelector(".txt");
			var Obtn = document.querySelector(".btn");
			var Oul = document.querySelector(".ull");

			// 点击发布按钮,就将文本框的内容插入到容器中
			Obtn.onclick = function() {
				var Oli = document.createElement("li");
				Oli.innerHTML = Otext.value;
				Otext.value = "";
				if (Oul.children.length > 0) {
					Oul.insertBefore(Oli, Oul.children[0]);
				} else {
					Oul.appendChild(Oli);
				}
				//运动
				var iHeight = Oli.offsetHeight;
				Oli.style.height = "0";
				animate(Oli, {
					height: iHeight
				}, function() {
					animate(Oli, {
						opacity: 100
					})
				})
			}

			//实现键盘提交
			Otext.onkeydown = function(e) {
				var oEvent = e || event;
				//按ctrl加回车提交
				if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
					var Oli = document.createElement("li");
					Oli.innerHTML = Otext.value;
					Otext.value = "";
					if (Oul.children.length > 0) {
						Oul.insertBefore(Oli, Oul.children[0]);
					} else {
						Oul.appendChild(Oli);
					}
					//运动
					var iHeight = Oli.offsetHeight;
					Oli.style.height = "0";
					animate(Oli, {
						height: iHeight
					}, function() {
						animate(Oli, {
							opacity: 100
						})
					})
				}
			}
		</script>

	</body>
</html>

实现效果如下
在这里插入图片描述

只能输入数字的文本框

该文本框要实现
1.只能输入数字：可以按大键盘上的数字，也可以按小键盘的数字
2.可以进行回删，按backspace键
3.按方向键可以移动光标位置
实现代码如下

<body>
		<input type="text" name="" id="txt" value="" />
		<script type="text/javascript">
			var otxt = document.getElementById("txt");
			otxt.onkeydown = function(e) {
				var oEvent = e || event;
				// alert(oEvent.keyCode)
				//只能输入数字
				if (oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39 && (oEvent.keyCode < 48 || oEvent.keyCode >
						57) && (oEvent.keyCode < 96 || oEvent.keyCode > 105)) {
					//阻止默认事件
					return false;
				}
			}
		</script>
	</body>

不愿意做鱼的小鲸鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
路漫漫其修远兮：js的成长经历（九）—— js事件基础

目录事件绑定事件冒泡事件对象的兼容性鼠标点击事件鼠标的位置鼠标跟踪鼠标跟踪小案例小案例——自定义右菜单键盘事件键盘控制移动键盘提交只能输入数字的文本框事件绑定什么是事件绑定？可以在一个事件上增加多个函数，详细如下<body> <input type="button" name="" id="btn1" value="按钮" /> <script typ...
复制链接

扫一扫