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>点击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>

本人文笔有限,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(JavaScript,javascript,前端)