深入了解最常用的JavaScript 事件
更新时间：2021年12月07日 16:38:03 作者：Java法师
这篇文章主要为大家介绍了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://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.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://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg")
}
// 显示第二张
function down() {
let img = document.getElementById("img");
img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.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://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up">上一张</button>
<button id="down">下一张</button>
</body>
<script>
// 显示第一张
function up() {
let img = document.getElementById("img");
img.setAttribute("src", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1582373193,2567665585&fm=26&gp=0.jpg")
}
let s = document.getElementById("up");
s.onclick = up;
// 显示第二张
function down() {
let img = document.getElementById("img");
img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章介绍了JS获取鼠标坐标的实例方法，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了JavaScript自定义函数的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了JS简单判断是否在微信浏览器打开的方法,结合实例形式分析了javascript针对浏览器相关信息的获取与判定操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了bootstrap-Treeview实现级联勾选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了JS正则表达式验证账号、手机号、电话和邮箱是否合法,需要的朋友可以参考下2017-03-03
详解addEventListener的三个参数之useCapture
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下2015-03-03
这篇文章主要介绍了JS加密插件CryptoJS实现AES加密操作,结合实例形式分析了CryptoJS插件的具体设置与AES加密操作实现技巧,需要的朋友可以参考下2018-08-08
self中resend是调用“基类方法”的原语，它会把当前接收到的消息原样发送给其原型（parent*）。在ECMA-v5时代，我们终于可以做出这个伟大的东西了。2010-07-07
这篇文章主要介绍了JS实现漂亮的时间选择框效果,结合实例形式分析了javascript时间选择框插件的实现与使用方法,需要的朋友可以参考下2016-08-08
这篇文章主要和大家聊一聊JavaScript的New关键字，一般我们通过New关键字来创建一个类的实例对象，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论