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/