快捷導(dǎo)航

JS綁定事件的3種方法舉例示范(簡單易懂)

更新時間：2023年11月29日 08:36:55 作者：遠近高低各不同

在JavaScript的學(xué)習(xí)中我們經(jīng)常會遇到JavaScript的事件機制,例如事件綁定、事件監(jiān)聽、事件委托（事件代理）等,這篇文章主要給大家介紹了關(guān)于JS綁定事件的3種方法,需要的朋友可以參考下

前言

相信大家都了解過事件，但如何給元素綁定事件，如何使用呢？

讓我為大家介紹三種綁定事件的方法吧！

以下都是用點擊事件(click)來做示范

一、行內(nèi)綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 第一種方法,行內(nèi)綁定事件,取一個函數(shù)名稱 -->
    <button onclick="fun()">點擊</button>
</body>
<script>
    // 第一種方法
    function fun() {
        console.log(1);
    }
</script>
</html>

二、使用on綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>點擊</button>
</body>
<script>
    // 第二種方法
    // 先獲取button元素
    let but = document.querySelector("button")
    // 使用on的方法綁定
    but.onclick = function(){
        console.log(1);
    }
</script>
</html>

三、使用事件監(jiān)聽的形式綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>點擊</button>
</body>
<script>
    // 第三種方法
    // 先獲取button元素
    let but = document.querySelector("button")
    // 使用addEventListener
    but.addEventListener("click",function(){
        console.log(1);
    })
</script>
</html>

代碼總結(jié)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>綁定事件的三種方法</title>
</head>
<body>
      <!-- 第一種方法,行內(nèi)綁定事件,取一個函數(shù)名稱 -->
      <!-- <button οnclick="fun()">點擊</button> -->
      <button>點擊</button>
</body>
<script>
     // 第一種方法
    //  function fun() {
    //     console.log(1);
    // }
    // .......................
     // 第二種方法
    // 先獲取button元素
    // let but = document.querySelector("button")
    // 使用on的方法綁定
    // but.onclick = function(){
    //     console.log(1);
    // }
    // ...........................
     // 第三種方法
    // 先獲取button元素
    // let but = document.querySelector("button")
    // 使用addEventListener
    // but.addEventListener("click",function(){
    //     console.log(1);
    // })
</script>
</html>