常用的JavaScript事件有哪些
常用的JavaScript事件有哪些
发布时间：2021-12-12 18:05:35 来源：高防服务器网 阅读：53 作者：小新 栏目：开发技术
小编给大家分享一下常用的JavaScript事件有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
JavaScript 事件：
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
常用的事件：
| 属性 | 触发时机 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |
事件操作
绑定事件
方式一： 通过标签中的事件属性进行绑定。
<body> <img id="img" src="https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42675.jpg"> <br/> <button id="up" onclick="up()">上一张</button> <button id="down" onclick="down()">下一张</button> </body> <script> // 显示第一张 function up() { let img = document.getElementById("img"); img.setAttribute("src", "https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42675.jpg") } // 显示第二张 function down() { let img = document.getElementById("img"); img.setAttribute("src", "https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42676.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8") } </script>
方式二： 通过 DOM 元素属性绑定。
<body> <img id="img" src="https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42675.jpg"> <br/> <button id="up">上一张</button> <button id="down">下一张</button> </body> <script> // 显示第一张 function up() { let img = document.getElementById("img"); img.setAttribute("src", "https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42675.jpg") } let s = document.getElementById("up"); s.onclick = up; // 显示第二张 function down() { let img = document.getElementById("img"); img.setAttribute("src", "https://cache.gaofangfuwuqi.com/upload/information/20211207/112/42676.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8") } let x = document.getElementById("down"); x.onclick = down; </script>
以上是“常用的JavaScript事件有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[