HTML——jQuery之事件绑定、取消事件绑定及事件委托

杨不旧

已于 2022-02-19 14:31:22 修改

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： jquery html javascript

于 2021-12-16 22:19:56 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/121984910

版权

JavaScript 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

事件绑定

事件绑定有两种方法：分别是：.click() 和.on()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-1.11.3.js"></script>
  <style>
    #mydiv button {
      margin: 0 20px;
    }
  </style>
</head>
<body>
  <button id="btn1">点击</button>
  <script>
	//给btn1绑定事件
     $('#btn1').click(function () {
     	 console.log(1230)
     })
  </script>
</body>
</html>

如图给id为btn1的button绑定事件，点击结果则为：在控制台打印“1230”

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-1.11.3.js"></script>
</head>

<body>
  <button id="btn1">点击</button>
  <button id="btn2">点击2</button>
  <script>
  	//给btn1绑定事件(.click和.on都可给目标节点绑定事件)
    $('#btn1').click(function () {
     	 console.log(1230)
     })
    //给btn2绑定事件
    $('#btn2').on('click', function () {
      // 取消btn1的事件绑定
      $('#btn1').off('click')
    })
  </script>
</body>
</html>

如上代码块：我们给id为btn1的button绑定了click事件，执行结果为：在控制台打印“0123”。
则写下面的则是给id为btn2的button绑定一个click事件，执行结果为：给id为btn1的button解除了事件绑定。

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-1.11.3.js"></script>
  <style>
    #mydiv button {
      margin: 0 20px;
    }
  </style>
</head>
<body>
  <div id="mydiv">

  </div>
  <button id="btn1">点击</button>
  <script>
    let num = 1
    //给id为btn1的button绑定事件
    $('#btn1').on('click', function () {
    //往id为mydiv的div里添加一个按钮，且点击几次就是按钮几，
    //比如点击一次就是按钮1，点击两次就是按钮2............
      $('#mydiv').append(`<button>按钮${num++}</button>`)
    })

    // 事件委托（给id为mydiv的div里的button添加绑定事件）
    $('#mydiv').on('click', 'button', function () {
    	//则每个button点击后的执行结果都为：在控制台打印“被点击了”
      console.log('被点击了')
    })
  </script>
</body>
</html>