深入瞭解最常用的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>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!