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