小编给大家分享一下常用的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://file.lsjlt.com/upload/202306/21/wue2gi55ku2.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://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg") } // 显示第二张 function down() { let img = document.getElementById("img"); img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/0mvpxjnczov.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://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg"><br/><button id="up">上一张</button> <button id="down">下一张</button></body><script> // 显示第一张 function up() { let img = document.getElementById("img"); img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/wue2gi55ku2.jpg") } let s = document.getElementById("up"); s.onclick = up; // 显示第二张 function down() { let img = document.getElementById("img"); img.setAttribute("src", "https://file.lsjlt.com/upload/202306/21/0mvpxjnczov.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事件有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!