快捷導(dǎo)航

深入了解最常用的JavaScript 事件

更新時間：2021年12月07日 16:38:03 作者：Java法師

這篇文章主要為大家介紹了JavaScript 事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

JavaScript 事件：

事件指的就是當(dāng)某些組件執(zhí)行了某些操作后，會觸發(fā)某些代碼的執(zhí)行。

常用的事件：

屬性	觸發(fā)時機
onabort	圖像加載被中斷
onblur	元素失去焦點
onchange	用戶改變域的內(nèi)容
onclick	鼠標(biāo)點擊某個對象
ondblclick	鼠標(biāo)雙擊某個對象
onerror	當(dāng)加載文檔或圖像時發(fā)生某個錯誤
onfocus	元素獲得焦點
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或按住
onkeyup	某個鍵盤的鍵被松開
onload	某個頁面或圖像被完成加載
onmousedown	某個鼠標(biāo)按鍵被按下
onmousemove	鼠標(biāo)被移動
onmouseout	鼠標(biāo)從某元素移開
onmouseover	鼠標(biāo)被移到某元素之上
onmouseup	某個鼠標(biāo)按鍵被松開
onreset	重置按鈕被點擊
onresize	窗口或框架被調(diào)整尺寸
onselect	文本被選定
onsubmit	提交按鈕被點擊
onunload	用戶退出頁面

事件操作

綁定事件

方式一：通過標(biāo)簽中的事件屬性進行綁定。

<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>&nbsp;
<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>&nbsp;
<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>