当前位置:首页 > 自学前端 > JavaScript > js教程 DOM的事件处理

js教程 DOM的事件处理

刘广法2022年04月14日 18:22:15JavaScript2700
js教程 DOM的事件处理-第1张图片-刘广法IT博客

js教程 DOM的事件处理

js 和人进行行为交互。

一、添加事件有三种方式:

1、直接在在标记中,定义onXXXX事件

2、给dom元素添加onXXXX 属性,与第一种指定的效果完全相同,

第一种、第二种取消事件:dom元素.onXXXX = null。

第一种、第二种对一个元素只能添加一个事件。

3、推荐使用:添加事件监听器

dom元素.addEventListener("事件名称",事件处理函数):

相对于第一种、第二种的优点:

1、可以给一个元素添加多个同类型事件

2、删除函数:dom元素.removeEveneListener("事件名称",事件处理函数名称):

二、事件类型:

1、click:单击事件,

2、dblclick:双击事件

3、onload:window对象和img对象,可以触发

4、keypress:按下一个键

5、keydown / keyup:键按下 / 弹起 。按下可以持续触发,弹起只触发一次。

6、mousedown:鼠标按下,左中右键触发。

三、定时任务:

1、setTimeout:在指定的事件后,执行一个操作,只执行一次

2、clearInterval(事件函数);

3、setInterval:每隔指定的事件后,执行一个操作

4、键盘相关事件:onPress、onKeyDown、onKeyUp

四、事件相关关键词:

案例一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				height: 100%;
			}

			body {
				margin: 0;
				overflow: hidden;
			}

			div {
				width: 300px;
				height: 200px;
				background-color: pink;
				/* 过渡 */
				transition: all .5s;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<button id="btn" type="button" onclick="changeColor()">点我</button>

		<div></div>

		<script type="text/javascript">
			var div = document.querySelector("div");
			/* div.onclick = function(){
				div.style.width = "400px";
				div.style.height = "300px";
				div.style.backgroundColor = "green";
			}; */

			//把事件取消
			// div.onclick = null;

			var timer;
			//添加事件监听器
			div.addEventListener("click", function() {
				var sw = document.body.offsetWidth;
				var sh = document.body.offsetHeight;
				//每隔一定的时间执行一个操作
				timer = setInterval(function() {
					//左偏移
					var offsetLeft = parseInt((Math.random() * sw));
					var offsetTop = parseInt(Math.random() * sh);

					div.style.top = offsetTop + "px";
					div.style.left = offsetLeft + "px";
				}, 1000);
			});

			div.addEventListener("click", function(){
				console.log("移动开始");
			});
			
			//移除事件
			div.removeEventListener("click",func1);


			function func1() {
				console.log("移动开始");
			}


			function changeColor() {
				var btn = document.querySelector("#btn");
				btn.style.backgroundColor = "red";

				//停止定时器
				clearInterval(timer);
			}
		</script>
	</body>
</html>

案例二:获取指定按键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//页面载入结束之后 
			window.onload = function() {
				var mydiv = document.querySelector("#mydiv");
				console.log(mydiv);
				var ipt = document.querySelector("#username");

				ipt.addEventListener("keypress", function(e) {
					console.log(e.key + ":" + e.keyCode);
				});
			}
		</script>
	</head>
	<body>
		<div id="mydiv"></div>

		<input type="text" id="username">
	</body>
</html>

案例三:通过指定按键进行图标进行移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#chrome {
				width: 60px;
				height: 60px;
				background: url(img/091.png) no-repeat center center/cover;
				position: absolute;
				bottom: 0;
				left: calc(50% - 30px);
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var chrome = document.querySelector("#chrome");
				//键按下
				document.addEventListener("keydown", function(e) {
					//当前元素的上偏移
					var currentTop = chrome.offsetTop;
					//当前元素的左偏移
					var currentLeft = chrome.offsetLeft;
					switch (e.key) {
						case 'w':
							chrome.style.top = currentTop - 5 + "px";
							break;
						case 'a':
							chrome.style.left = currentLeft - 5 + "px";
							break;
						case 's':
							chrome.style.top = currentTop + 5 + "px";
							break;
						case 'd':
							chrome.style.left = currentLeft + 5 + "px";
							break;
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="chrome"></div>
	</body>
</html>

案例四:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mydiv {
				width: 300px;
				height: 200px;
				background-color: pink;
				/* margin-left: 100px;
				margin-top: 100px; */
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var mydiv = document.querySelector(".mydiv");
				mydiv.addEventListener("mousedown", function(e) {
					console.log("鼠标按下");
					console.log(event.button);
				});

				mydiv.addEventListener("mouseup", function(e) {
					console.log("鼠标弹起");
				});

				mydiv.addEventListener("mousemove", function(e) {
					console.log("鼠标移动");
					console.log(e.pageX + ":" + e.pageY);
				});

				mydiv.addEventListener("mouseenter", function(e) {
					console.log("鼠标进入");
					//console.log(e.pageX + ":" + e.pageY);
					mydiv.style.backgroundColor = "green";
					var currentLft = mydiv.offsetLeft;
					var currentTop = mydiv.offsetTop;
					
					mydiv.style.left = currentLft + 5 + "px";
					mydiv.style.top = currentTop + 5 + "px";
				});

				mydiv.addEventListener("mouseleave", function(e) {
					console.log("鼠标离开");
					//console.log(e.pageX + ":" + e.pageY);
					mydiv.style.backgroundColor = "pink";
					
					var currentLft = mydiv.offsetLeft;
					var currentTop = mydiv.offsetTop;
					
					mydiv.style.left = currentLft - 5 + "px";
					mydiv.style.top = currentTop - 5 + "px";
					
				});
			}
		</script>
	</head>
	<body>
		<!-- 鼠标相关事件 -->
		<div class="mydiv" onm></div>
	</body>
</html>


文章来源:刘广法,转载请注明出处。原文链接网站为:https://liuguangfa.com/

扫描二维码推送至手机访问。

版权声明:本文由刘广法博客发布,如需转载请注明出处。

本文链接:https://liuguangfa.com/js/174.html

分享给朋友:

“js教程 DOM的事件处理” 的相关文章

js教程 js基础知识(变量常量、运算符、循环结构)

js基础知识:一、变量常量在 js 中的类型分为原始类型,和引用类型原始类型:1、number:数字(包括小数和整数,和 Java 不同)2、string:字符串(js 中不分字符串和字符)3、boolean:布尔类型(和 java 相同)4、null:空5、undefined:不确定类型二、运算符...

js教程 数组、函数、面向对象、DOM

js教程 数组、函数、面向对象一:数组:在js中数组可以添加任意位置的任意类型js中常用的函数:.pash();    从尾部压入.pop();    从尾部取出并移除.unshift();  &nb...

js教程 BOM浏览器对象模型

javascript = EcmaScript + DOM + BOM BOM:broswer object model,浏览器对象模型。1、window:对象。用于指代窗口。 2、history:访问历史记录。back()表示后退一页,forward表示前进一页,go表示前进或...

js教程 jQuery

JQuery:就是一个js库。提供了一些非常易用,常用的功能,方便进行高效的js操作。jquery的操作语法:jq对象.action();一、jQuery对象与dom对象的区别:jQuery对象转化成dom对象?$jq[x] :juqery对象通过下标索引,可以获取对应的dom对象。或者使用 $jq...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。