JS绑定事件的三种方法(简单易懂)

远近高低各不同

已于 2023-10-17 22:59:33 修改

阅读量3.6k

点赞数 1

文章标签： javascript 前端

于 2023-10-15 15:21:59 首次发布

本文链接：https://blog.csdn.net/m0_74577714/article/details/133843001

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？
让我为大家介绍三种绑定事件的方法吧！
以下都是用点击事件(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>