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】

jQuery基础--事件处理的更多相关文章

jQuery基础事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery基础之事件处理
jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...
jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
jquery基础知识汇总
jquery基础知识汇总一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
Jquery基础教程第二版学习记录
本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...
第一章 jQuery基础
第一章jQuery基础一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
jQuery系列第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程目录: 第2章选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

随机推荐

洛咕【P1891】疯狂LCM & 三倍经验
经验给掉先: 经验*1 经验*2 经验*3 这里给个跑得比较慢的 $n \sqrt n$ 预处理然后 $O(1)$ 回答询问的做法式子首先我们推柿子: \[\begin{aligned}A ...
Floyd(弗洛伊德)算法(C语言)
转载:https://blog.csdn.net/qq_35644234/article/details/60875818 Floyd算法的介绍算法的特点弗洛伊德算法是解决任意两点间的最短路径的一 ...
linux开启 Sersync 守护进程进行数据同步
a.配置 Sersync 环境变量 [root@SERSYNC sersync]# echo 'export PATH=$PATH:/usr/local/sersync/bin'>>/et ...
pg_resetxlog - 重置一个 PostgreSQL 数据库集群的预写日志以及其它控制内容
SYNOPSIS pg_resetxlog [ -f ] [ -n ] [ -o oid] [ -x xid] [ -l fileid,seg] datadir DESCRIPTION 描述 pg_r ...
MongoDB的环境搭建及启动
MongoDB环境搭建及配置一.环境搭建 Mac:brew install mongodb 常见问题: Error: Permission denied @ unlink_internal 解决方案 ...
OGG-01169
OGG-01169 Oracle GoldenGate Delivery for Oracle, dwarer.prm: Encountered an update where all key c ...
linux man命令后面各种括号的意义
圆括号我们经常会看到在说一个对象的man page 的时候,会有这样的格式: mmap(2) shm_open(3) 这个后面的数字是什么意思呢,通过 man man 命令就可以知道,这个是数字是 ...
切面AOP的切点@Pointcut用法
格式: execution(modifiers-pattern? ret-type-pattern declaring-type-pattern? name-pattern(param-pattern ...
JFreeChart使用
最近项目需要做图形分析,就想到了使用JFreeChart,之前也没有使用过,就现学先用吧.本文主要记录一些主要的代码及学习使用过程. 使用JFreeChart步骤: 一.下载JFreeChart.ja ...
linux环境进程开机自检脚本
Linux下shell脚本监控Tomcat的状态并实现自动启动最近公司需要在Linux下监控tomcat的服务,一旦tomcat服务存在异常或者宕机,重启tomcat保证服务的正常运行,由于Linu ...

jQuery基础--事件处理

2. jQuery事件机制

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

2.2. on注册事件(重点)

2.3. 事件解绑

2.4. 触发事件

2.5. jQuery事件对象

jQuery基础--事件处理的更多相关文章

随机推荐

热门专题