jQuery基础--事件处理

eadela

发布于 2019-09-29 15:20:09

2.5K0

发布于 2019-09-29 15:20:09

文章被收录于专栏：eadela

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>

<!--点击按钮，在div里面创建一个新的p元素-->
<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><input type="checkbox"/></td> -->
      <td>JavaScript</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>css</td>
      <td>传智播客-前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <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】

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-07-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery