ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-08-02 07:33:43  阅读:138  来源: 互联网

标签:jQuery function 单击 bind delegate 注册 div 事件


<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 6:09-->
<!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 class="two"></div>');
      // 将 创建的 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>

在这里插入图片描述

标签:jQuery,function,单击,bind,delegate,注册,div,事件
来源: https://www.cnblogs.com/beyondx/p/16542455.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有