jQuery基础–事件处理
- 2019 年 10 月 10 日
- 筆記
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】
