jQuery基础--事件处理

末蓝、 2021-10-19 02:54 378阅读 0赞

[jQuery基础--事件处理][jQuery_--]

# 2. jQuery事件机制 #

> JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

## 2.1. jQuery事件发展历程(了解) ##

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

> 简单事件注册
> 
>     click(handler)            单击事件
>     mouseenter(handler)        鼠标进入事件
>     mouseleave(handler)        鼠标离开事件
> 
> 缺点：不能同时注册多个事件
> 
> bind方式注册事件

//第一个参数：事件类型
    //第二个参数：事件处理程序
    $("p").bind("click mouseenter", function(){
        //事件响应方法
    });

缺点：不支持动态事件绑定

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        #box {
          width: 500px;
          height: 500px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    
    
    <input type="button" value="按钮" id="btn">
    
    <div id="box">
      <div>
        <span>呵呵</span>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
      </div>
    </div>
    
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      //$("div").children("p").click(function(){})
      
      
      
      $(function () {
        
       
    //
        //bind方式
    //    $("p").bind({
    //      click:function () {
    //        alert("呵呵")
    //      },
    //      mouseenter:function () {
    //        alert("哈哈")
    //      }
    //    });
        
        
        $("#btn").click(function () {
          $("<p>我是新增加的p元素</p>").appendTo("div");
        });
      
        
        //简单事件，给自己注册的事件
    //    $("div").click(function () {
    //      alert("哈哈");
    //    });
        
        //delegate:代理，委托
        //1. 给父元素注册委托事件，最终还是有子元素来执行。
        
        
        //要给div注册一个委托事件,但是最终不是由执行，而是有p执行
        //第一个参数：selector:事件最终由谁来执行。
        //第二个参数：事件的类型
        //第三个参数：函数，要做什么
        
        //1. 动态创建的也能有事件 :缺点：只能注册委托事件
        $("#box").delegate("p", "click", function () {
          //alert("呵呵");
          console.log(this);
        });
        
        
        
        
        //注册简单事件，缺点：一次只能注册一个事件
    //    $("p").click(function () {
    //      alert("呵呵");
    //    });
      });
    </script>
    
    </body>
    </html>

> delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $(".parentBox").delegate("p", "click", function(){
        //为 .parentBox下面的所有的p标签绑定事件
    });

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

> on注册事件

## 2.2. on注册事件(重点) ##

> jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
> 
> 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( "click", function() {});

on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on( "click",“span”, function() {});

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events[,selector][,data],handler);

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <input type="button" value="增加" id="btn">
    <div>
      <p>111111</p>
      <p>111111</p>
      <p>111111</p>
      <p>111111</p>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        
        // 这个是p自己注册的事件（简单事件）
        /*$("p").on("click", function () {
          alert("呵呵");
        });*/
        
        
        $("div").on("click", "p", function () {
          alert("呵呵")
        });
        
        
        $("#btn").on("click", function () {
          $("<p>我是新建的p元素</p>").appendTo("div");
        });
        
        
      });
    </script>
    
    </body>
    </html>

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          height: 500px;
          width: 500px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    
    <input type="button" value="增加" id="btn">
    <div>
      <p>111111</p>
      <p>111111</p>
      <p>111111</p>
      <p>111111</p>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        
        // 这个是p自己注册的事件（简单事件）
        $("p").on("click", function () {
          alert("呵呵哒");
        });
      
      
        //给div自己执行的
        $("div").on("click", function () {
          alert("呜呜呜");
        });
        
        //给div里面的p执行 委托事件
        $("div").on("click", "p", function () {
          alert("嘿嘿嘿")
        });
        
        
        
        $("#btn").on("click", function () {
          $("<p>我是新建的p元素</p>").appendTo("div");
        });
        
        
      });
    </script>
    
    </body>
    </html>

<!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
        
        .wrap {
          width: 410px;
          margin: 100px auto 0;
        }
        
        table {
          border-collapse: collapse;
          border-spacing: 0;
          border: 1px solid #c0c0c0;
        }
        
        th,
        td {
          border: 1px solid #d0d0d0;
          color: #404060;
          padding: 10px;
        }
        
        th {
          background-color: #09c;
          font: bold 16px "Î¢ÈíÑÅºÚ";
          color: #fff;
        }
        
        td {
          font: 14px "Î¢ÈíÑÅºÚ";
        }
        
        td a.get {
          text-decoration: none;
        }
        
        a.del:hover {
          text-decoration: underline;
        }
        
        tbody tr {
          background-color: #f0f0f0;
        }
        
        tbody tr:hover {
          cursor: pointer;
          background-color: #fafafa;
        }
        
        .btnAdd {
          width: 110px;
          height: 30px;
          font-size: 20px;
          font-weight: bold;
        }
        
        .form-item {
          height: 100%;
          position: relative;
          padding-left: 100px;
          padding-right: 20px;
          margin-bottom: 34px;
          line-height: 36px;
        }
        
        .form-item > .lb {
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          width: 100px;
          text-align: right;
        }
        
        .form-item > .txt {
          width: 300px;
          height: 32px;
        }
        
        .mask {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.15;
          display: none;
        }
        
        .form-add {
          position: fixed;
          top: 30%;
          left: 50%;
          margin-left: -197px;
          padding-bottom: 20px;
          background: #fff;
          display: none;
        }
        
        .form-add-title {
          background-color: #f7f7f7;
          border-width: 1px 1px 0 1px;
          border-bottom: 0;
          margin-bottom: 15px;
          position: relative;
        }
        
        .form-add-title span {
          width: auto;
          height: 18px;
          font-size: 16px;
          font-family: ËÎÌå;
          font-weight: bold;
          color: rgb(102, 102, 102);
          text-indent: 12px;
          padding: 8px 0px 10px;
          margin-right: 10px;
          display: block;
          overflow: hidden;
          text-align: left;
        }
        
        .form-add-title div {
          width: 16px;
          height: 20px;
          position: absolute;
          right: 10px;
          top: 6px;
          font-size: 30px;
          line-height: 16px;
          cursor: pointer;
        }
        
        .form-submit {
          text-align: center;
        }
        
        .form-submit input {
          width: 170px;
          height: 32px;
        }
      </style>
    
    
    </head>
    
    <body>
    <div class="wrap">
      <input type="button" value="清空内容" id="btn">
      <input type="button" value="添加" id="btnAdd">
      <table>
        <thead>
        <tr>
          <th>课程名称</th>
          <th>所属学院</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
          
          <td>JavaScript</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          
          <td>css</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          
          <td>html</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <td>jQuery</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        </tbody>
      </table>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        //1. 找到清空按钮，注册点击事件，清空tbody
        $("#btn").on("click", function () {
          $("#j_tb").empty();
        });
        
        
        //2. 找到delete，注册点击事件
    //    $(".get").on("click", function () {
    //      $(this).parent().parent().remove();
    //    });
        
        $("#j_tb").on("click", ".get", function () {
          $(this).parent().parent().remove();
        });
        
        
        //3. 找到添加按钮,注册点击事件
        $("#btnAdd").on("click", function () {
          $('<tr> <td>jQuery111</td> <td>传智播客-前端与移动开发学院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");
        });
        
      });
      
    </script>
    
    
    </body>
    
    </html>

触发事件

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <input type="button" value="触发" id="btn">
    <p>我是一个p元素</p>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        $("p").on("click", function () {
          alert("呵呵");
        })
        
        
        //toggle：切换  trigger：触发
        $("#btn").on("click",function () {
          //触发p元素的点击事件
          //$("p").click();
          //$("p").trigger("click");
        });
       
        
      });
    </script>
    </body>
    </html>

on的data传值问题

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div>这是一个div</div>
    
    <p>这是一个p元素</p>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        //100，注册的时候的时候，把100传到事件里面去。
        var money = 100;
        //on(types, selector, data, callback)
        //使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到。
        $("div").on("click",100, function (e) {
          console.log(e);
          console.log("哈哈，我有"+e.data);
        });
        
        money = 0;
        $("p").on("click", function () {
          console.log("呜呜，我有"+0);
        })
        
      });
    </script>
    </body>
    </html>

阻止浏览器默认行为

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <a href="http://web.itcast.cn" id="link">呵呵</a>
    
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        $("#link").on("click", function (e) {
          
          //阻止 默认
          //e.preventDefault();
          //e.stopPropagation();
          //alert("呵呵");
          //return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。
          //console.log(e.cancelBubble);
          //alert("呵呵");
        });
        
        $("body").on("click", function () {
          alert("嘻嘻");
        })
        
      });
    </script>
    </body>
    </html>

## 2.3. 事件解绑 ##

> unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
    $(selector).unbind("click"); //解绑指定的事件

> undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
    $( selector).undelegate( “click” ); //解绑所有的click事件

> off方式（推荐）

// 解绑匹配元素的所有事件
    $(selector).off();
    // 解绑匹配元素的所有click事件
    $(selector).off("click");

## 2.4. 触发事件 ##

$(selector).click(); //触发 click事件
    $(selector).trigger("click");

## 2.5. jQuery事件对象 ##

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY    对应屏幕最左上角的值
    //clientX和clientY    距离页面左上角的位置（忽视滚动条）
    //pageX和pageY    距离页面最顶部的左上角的位置（会计算滚动条的距离）
    
    //event.keyCode    按下的键盘代码
    //event.data    存储绑定事件时传递的附加数据
    
    //event.stopPropagation()    阻止事件冒泡行为
    //event.preventDefault()    阻止浏览器默认行为
    //return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

【案例：钢琴版导航（加强）.html】

posted on 2019-07-31 11:22 [eadela][] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/eadela/p/11275138.html

[jQuery_--]: https://www.cnblogs.com/eadela/p/11275138.html
[eadela]: https://www.cnblogs.com/eadela/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11275138