js教程 DOM的事件处理
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/
