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遍历方法 ...

随机推荐

OtterTune配置记录
0. 准备两台Ubuntu 18.04的虚拟机,安装mysql(供server-side存储调优数据用)和postgresql(供client-side存储业务数据用,这里以PostgreSQL为例. ...
27、前端知识点--webpack面试题(二)
webpack面试题总结本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元 ...
SSM商城系统开发笔记-问题01-通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明。
配置搭建完后进行Post请求测试时报错: Caused by: org.xml.sax.SAXParseException; lineNumber: 14; columnNumber: 29; cvc ...
python 安装opencv及问题解决
正常安装模式 pip install opencv-python==3.4.5.20 pip install opencv-contrib-python==3.4.5.20 -i http://pyp ...
sqoop使用中文手册
文章转载自:http://www.zihou.me/html/2014/01/28/9114.html 1. 概述本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera ...
GetExtendedTcpTable
https://blog.csdn.net/sky101010ws/article/details/55511501 AdjustTokenPrivileges function Library Ad ...
bzoj3252 攻略贪心+dfs序+线段树
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3252 题解有一个非常显然的贪心思路:每次选择目前走到那儿能够获得的新权值最大的点. 证明的话 ...
Web核心之JSP
JSP JSP = HTML + Java + JSP自己的一些语法 JSP也是一个动态网页开发技术. JSP本质 Jsp实际上就是一个Servlet,在jsp被访问时,tomcat会把jsp转换为一 ...
【leetcode】1038. Binary Search Tree to Greater Sum Tree
题目如下: Given the root of a binary search tree with distinct values, modify it so that every node has ...
CSS中属性百分比的基准点
1.属性百分比的基准点 1.1.基于包含块以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

jQuery基础--事件处理

2. jQuery事件机制

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

2.2. on注册事件(重点)

2.3. 事件解绑

2.4. 触发事件

2.5. jQuery事件对象

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

随机推荐

热门专题