|
viceen 于 2022-07-06 09:28:59 发布 756 收藏 3 分类专栏： html和css 文章标签： html javascript 前端 版权 html和css 专栏收录该内容 5 篇文章0 订阅 订阅专栏 HTML中的DOM事件——鼠标事件、键盘事件、框架/对象事件、表单事件 1. 什么是事件 是通过用户进行触发的一些行为。比如：点击、双击、键盘按下抬起等等都称为事件。 事件在触发的时候会产生一个事件对象。 2.事件的添加方式 在标签内添加事件名称，并调用对应的事件处理函数 <body> <button id="box" onclick="a()">按钮</button> </body> <script> function a() { console.log("点击了"); } </script> 通过获取 DOM 对象，然后添加事件，并赋值的事件的处理函数。 <body> <button id="box">按钮</button> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); // 给元素添加事件 box.onclick = function (event) { console.log("点击了"); console.log(event); }; </script> 通过监听的方式添加事件。 <body> <button id="btn">按钮</button> </body> <script> var btn = document.getElementById("btn"); // 通过添加事件的监听 // 第一个参数是事件的类型 // 第二个参数是事件的处理函数 btn.addEventListener("click", function (event) { console.log("点击了"); console.log(event); }); </script> 3. 鼠标事件 3.1 单机事件 onclick 3.2 双击事件 ondblclick <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.ondblclick = function () { console.log("双击了"); }; </script> 3.3 鼠标按下事件 onmousedown 鼠标在某一个元素中进行按下操作时会触发 <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmousedown = function () { console.log("鼠标按下"); }; </script> 3.4 鼠标抬起事件 onmouseup <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmouseup = function () { console.log("鼠标抬起"); }; </script> 3.5 鼠标进入事件 onmouseenter <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmouseenter = function () { console.log("鼠标进入"); }; </script> 3.6 鼠标离开事件 onmouseleave <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmouseleave = function () { console.log("鼠标离开"); }; </script> 3.7 鼠标移动事件 onmousemove <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmousemove = function () { console.log("鼠标移动"); }; </script> 3.8 鼠标移入 onmouseover <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmouseover = function () { console.log("鼠标移入"); }; </script> 3.9 鼠标移除 onmouseout <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 获取DOM对象 var box = document.getElementById("box"); box.onmouseout = function () { console.log("鼠标移出"); }; </script> 4. 键盘事件 4.1 某个键盘按键被按下：onkeydown <script> document.body.onkeydown = function (event) { console.log(event.keyCode); // 获取键盘按键的键码 console.log("键盘按下"); }; </script> 4.2 某个键盘按键被松开：onkeyup <script> document.body.onkeyup = function (event) { console.log(event.keyCode); // 获取键盘按键的键码 console.log("键盘抬起"); }; </script> 4.3 某个键盘按键被按下并松开：onkeypress <script> document.body.onkeypress = function (event) { console.log(event.keyCode); // 获取键盘按键的键码 console.log("键盘按下并抬起"); }; </script> 5. 框架/对象(Frame/Object) 事件 5.1 一张页面或一幅图像完成加载：onload <head> <script> // 页面加载事件 这个事件通过情况下绑定在 window window.onload = function () { foo(); var box = document.getElementById("box"); console.log(box); }; function foo() { console.log("foo"); } </script> </head> <body> <div id="box"></div> </body> 5.2 当文档被滚动时发生的事件：onscroll <head> <style> #box { height: 3000px; } </style> </head> <body> <div id="box"></div> </body> <script> window.document.onscroll = function () { console.log("滚动事件触发了"); // 获取文档滚动的高度 var top = document.documentElement.scrollTop; console.log(top); }; </script> 5.3 窗口或框架被重新调整大小：onscroll <script> window.onresize = function () { console.log("窗口大小变化了"); }; </script> 6. 表单事件 6.1 元素失去焦点时触发：onblur <body> <form action="" method="get"> <p> 用户名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onblur = function () { console.log("失焦了"); }; </script> 6.2 该事件在表单元素改变时触发：onchange <body> <form action="" method="get"> <p> 用户名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onchange = function () { // 当你失焦了才能触发 或者 回车 console.log("输入了"); }; </script> 6.3 元素获取焦点时触发：onfocus <body> <form action="" method="get"> <p> 用户名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onfocus = function () { console.log("获取焦点"); }; </script> 6.4 元素获取用户输入时触发：oninput <body> <form action="" method="get"> <p> 用户名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.oninput = function () { // 当每输入一个值的时候就触发 console.log("oninput事件触发了"); }; </script> 6.5 表单提交时触发：onsubmit <body> <form id="form" action="" method="get" onsubmit="login()"> 用户名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> // 表单的处理函数 function login() { alert("表单已经提交了"); } var form = document.getElementById("form"); form.onsubmit = function () { alert("登陆"); // 组织表单的默认行为 阻止一直刷新 // event.preventDefault(); return false }; </script> ———————————————— 版权声明：本文为CSDN博主「viceen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_44867717/article/details/125632882 |
|
|
