目录 JavaScript 事件： 常用的事件： 事件操作 总结 JavaScript 事件： 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。 常用的事件： 属性 触发时机 onabort 图像加载被
目录
- JavaScript 事件：
- 常用的事件：
- 事件操作
- 总结
JavaScript 事件：
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
常用的事件：
事件操作
绑定事件
方式一： 通过标签中的事件属性进行绑定。
<body>
<img id="img" src="http://img.558idc.com/uploadfile/allimg/javascript/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", "http://img.558idc.com/uploadfile/allimg/javascript/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="http://img.558idc.com/uploadfile/allimg/javascript/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", "http://img.558idc.com/uploadfile/allimg/javascript/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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!