前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery基础--事件处理

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方式注册事件

代码语言:javascript
复制
//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

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

代码语言:javascript
复制
<!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注册委托事件

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

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

on注册事件

2.2. on注册事件(重点)

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

on注册简单事件

代码语言:javascript
复制
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件

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

on注册事件的语法:

代码语言:javascript
复制
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events[,selector][,data],handler);
代码语言:javascript
复制
<!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>
代码语言:javascript
复制
<!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>
代码语言:javascript
复制
<!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>

触发事件

代码语言:javascript
复制
<!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传值问题

代码语言:javascript
复制
<!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>

  阻止浏览器默认行为

代码语言:javascript
复制
<!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方式(不用)

代码语言:javascript
复制
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式(不用)

代码语言:javascript
复制
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式(推荐)

代码语言:javascript
复制
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

2.4. 触发事件

代码语言:javascript
复制
$(selector).click(); //触发 click事件
$(selector).trigger("click");

2.5. jQuery事件对象

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

代码语言:javascript
复制
//screenX和screenY    对应屏幕最左上角的值
//clientX和clientY    距离页面左上角的位置(忽视滚动条)
//pageX和pageY    距离页面最顶部的左上角的位置(会计算滚动条的距离)

//event.keyCode    按下的键盘代码
//event.data    存储绑定事件时传递的附加数据

//event.stopPropagation()    阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。

【案例:钢琴版导航(加强).html】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2. jQuery事件机制
    • 2.1. jQuery事件发展历程(了解)
      • 2.2. on注册事件(重点)
        • 2.3. 事件解绑
          • 2.4. 触发事件
            • 2.5. jQuery事件对象
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档