jQuery注册事件的发展历程(简单/bind/delegate/on)




DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题title>
  <style> 
    div {
      width: 200px;
      height: 200px;
      margin-top: 10px;
    }
    .one  {
      border: 1px solid red;
    }
    .two {
      border: 1px solid green;
    }
  style>
head>
<body>
  <input type="button" value="按钮" id="btn"/> <br/><br/>
  <div class="one" id="one">div>
  <span style="border:1px solid green">我是一个span标签span>


body>
html>
<script src="jquery-1.12.4.js">script>
<script>
  $(function () {
    /**
     * 原生js
     * 用原生的js 给 div 注册单击事件.
     * 原生js注册相同的事件,后面的会把前面的给覆盖.
     */
    // document.getElementById("one").onclick = function () {
    //   alert("原生js_单击事件1");
    // };
    // document.getElementById("one").onclick = function () {
    //   alert("原生技术_单击事件, 啦啦啦");
    // };

    /**
     * jQuery
     * 对 原生js事件 进行了封装, 增强了 事件处理能力
     * 给 同一个元素 注册 同样的事件,后面的 不会 把前面的 给覆盖.
     */
    // $('#one').click(function () {
    //   alert("jQuery_单击事件1");
    // });
    // $('#one').click(function () {
    //   alert("jQuery_单击事件2");
    // });




    //--------------------------------------------------------------------------------------
    /**
     * jQuery注册事件 的 发展历程
     *
     * 简单事件注册 -> bind方式注册 -> delegate注册委托事件
     *
     * 1. 最开始 简单事件绑定(不支持 同时注册; 不支持 动态注册)
     */

    /**
     *  1.简单事件绑定 click();
     * 不支持同时注册,也不支持动态注册.
     * 下面这个例子, 叫 一前一后 注册, 不是 同时注册
     */

    // $('div').click(function () {
    //   console.log("jQuery_鼠标单击事件");
    // });
    // $('div').mouseenter(function () {
    //   console.log("jQuery_鼠标移入事件");
    // });

    /**
     * 什么叫 同时注册
     * 给按钮设置点击事件,创建一个div.
     *
     * 动态注册
     * 已经注册完事件, 新创建的 元素, 不具有 事件
     */
    $('#btn').click(function () {
      var $divNew = $('
');
      // 将 创建的 div, 添加到 body
      $('body').append($divNew);
    });

    /**
     * 2. bind方式注册事件
     * 支持同时注册,也不支持动态注册.
     */
    // $('div').bind({
    //   mouseenter: function () {
    //     console.log("jQuery同时注册_鼠标移入事件");
    //   },
    //   click: function () {
    //     console.log("jQuery同时注册_鼠标单击事件");
    //   }
    // });

    // 另一种 书写方式
    // /**
    //  * 第1个参数: 事件类型
    //  * 第2个参数: 事件处理程序
    //  */
    // $('div').bind('click mouseenter', function () {
    //   // 事件响应方法
    // });

    /**
     * 3.delegate注册委托事件-原理是 事件冒泡.
     * 支持 同时注册,也支持 动态注册.
     */
    $('body').delegate('div', {
      mouseenter: function () {
        console.log("jQuery_delegate_鼠标移入事件");
      },
      click: function () {
        console.log("jQuery_delegate_鼠标单击事件");
      }
    });

    /**
     * 4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式。
     */

    /**
     * 1. on简单注册事件.
     * 不支持动态注册的.
     */

    /**
     * 4.2 on委托注册
     * 支持动态注册的.
     */

  });
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

在这里插入图片描述

相关阅读:
UDS入门至精通系列Service 86
1B踩坑大王
 Sping Security前后端分离两种方案
 DenseNet 和 FractalNet学习笔记
 回溯算法高效需要注意这两点
 3.17 让你的小红书笔记排名更靠前的六个方法【玩赚小红书】
图解LeetCode——1704. 判断字符串的两半是否相似（难度：简单）
基于VS2019编程实现的导弹惯性导航仿真导弹
 UNITY零基础学习 month1 day16
计算机网络-传输层（TCP协议特点和TCP报文段格式，TCP连接管理）
原文地址：https://blog.csdn.net/beyondx/article/details/126114168