JS绑定事件的三种方法(简单易懂)-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS绑定事件的三种方法(简单易懂)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？
让我为大家介绍三种绑定事件的方法吧！
以下都是用点击事件(click)来做示范

一、行内绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 第一种方法,行内绑定事件,取一个函数名称 -->
    <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>

三、使用事件监听的形式绑定事件

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

代码总结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件的三种方法</title>
</head>
<body>
      <!-- 第一种方法,行内绑定事件,取一个函数名称 -->
      <!-- <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>