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>

<!--点击按钮,在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】

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券