小編給大家分享一下常用的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.yisu.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.yisu.com/upload/information/20211207/112/42675.jpg")
}
// 顯示第二張
function down() {
let img = document.getElementById("img");
img.setAttribute("src", "https://cache.yisu.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.yisu.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.yisu.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.yisu.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事件有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
