深入瞭解最常用的JavaScript 事件

Posted on by

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：