深入瞭解最常用的JavaScript 事件
阿新 • • 發佈：2021-12-09
目錄
- 事件：
- 常用的事件：
- 事件操作
- 總結
Script 事件：
事件指的就是當某些元件執行了某些操作後，會觸發某些程式碼的執行。
常用的事件：
| 屬性 | 觸發時機 |
|---|---|
| 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",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/imag客棧e_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26http://www.cppcns.comf22be8b05a74c42b8f9dfb859480186.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>
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!