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

事件操作

綁定事件

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

<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>