jq05--强大的jq事件(事件处理)、on()、bind()、delegate()、hover()
1. jQuery事件机制
jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。
最主要的特点：可以给DOM对象绑定多个事件
2. jQuery事件的发展历程（了解）
简单事件绑定(单个事件 <详见jq04>) >> bind事件绑定 >> delegate事件绑定 >> on【重点】
2.1 bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定一个或多个事件
bind(type,[data],fn) ；为每个匹配元素的特定事件绑定事件处理函数。
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数；false: 将第三个参数设置为false会使默认的动作失效。
常用下面的方式：
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter",function(e){
//事件响应方法（函数）
});
比简单事件绑定方式的优势：
优点：可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”,function(){ })
缺点：要绑定事件的元素必须存在文档中。
按照上面的方法绑定多个事件的时候，要想使事件的效果比较明显只能通过切换（toggle()、slideToggle()、fadeToggle()）;这样局限性太大，这时就提供了另外一种方法使每个事件都出发它所对应的事件 即将bind(obj)中的参数变为对象，k为事件名称--v值为事件所对应的函数。
格式如下：
$(".bind").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <button class="bind">bind事件处理</button> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> //同时绑定多个事件 建议用切换的效果比较明显 // $('.bind').bind('mouseout mouseover',function () { // $('.box').toggle(2000); // }); //同时绑定多个事件类型/每个事件都有自己的处理程序（函数）处理程序 //那么bind(obj)里面的参数是一个对象；k为事件名称，v为事件所对应的函数 $('.bind').bind({mouseover:function () { $('.box').hide(2000,function () { console.log('我不见了！'); }); },click:function () { $('.box').show(2000,function () { console.log('我又出现了！'); }); }}) </script> </html>
2.2 delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效（比较特殊在： 参数中多了一个过滤对象（发生事件的对象）
delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
selector:选择器字符串，用于过滤器触发事件的元素。type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:传递到函数的额外数据
fn:当事件发生时运行的函数
常用下面的方式：// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".父级对象").delegate("过滤对象","click ", function(){
//为 .父级对象下面的所有的过滤对象绑定事件
});
案列：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <div class="delegate"> <button class="but">delegate事件处理</button> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </div> </body> <script src="jquery-3.3.1.js"></script> <script> //同时绑定多个事件 建议用切换的效果比较明显 //当鼠标到'.delegate'盒子下的'.but'按钮时 进入/离开 '.but'发生事件动画 $('.delegate').delegate('.but','mouseover mouseout',function () { $('.but').slideToggle(2000); }); //同时绑定多个事件类型/每个事件都有自己的处理程序（函数）处理程序 //那么delegate('selector',obj)里面的参数是一个对象；k为事件名称，v为函数
//当鼠标到'.delegate'盒子下的'.but'按钮时 进入/点击/离开 '.box'子盒子发生事件动画
// $('.delegate').delegate('.but',{mouseover:function () {// $('.box').fadeOut(2000,function () {// console.log('我不见了！');// });// },click:function () {// $('.box').show(2000,function () {// console.log('我又出现了！');// });// },mouseout:function () {// $('.box').fadeIn(2000,function () {// console.log('我淡淡的出现！');// });// }})</script></html>2.3 on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）（重点）
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素；如果选择的< null或省略，当它到达选定的元素，事件总是触发。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler（fn），事件处理函数（触发事件发生的函数）
$(selector).on(events[,selector][,data],handler);
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function(){ });
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
案列：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <div class="on"> <button class="but">on事件处理</button> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </div> </body> <script src="jquery-3.3.1.js"></script> <script> //同时绑定多个事件 建议用切换的效果比较明显 //当鼠标到'.on'父盒子下的'.but'按钮时 点击/进入/离开 '.box'发生事件动画（根据你经过的次数发生事件） // $('.on').on('click mouseover mouseout','.but',function () { //// $('.but').slideToggle(2000);//也可以是自身 // $('.box').slideToggle(2000); // }); //当没有selector这个参数时，事件事件处理函数中的代码一直触发 // $('.on').on('mouseenter mouseleave',{name:'muzidigbig'},function (event) { // console.log(event.data.name); // $('.box').slideToggle(2000); // }); //同时绑定多个事件类型/每个事件都有自己的处理程序（函数）处理程序（在此显的不是很好用） //那么on('selector',obj)里面的参数是一个对象；k为事件名称，v为函数 $('.on').on({mouseover:function () { $('.box').fadeOut(2000,function () { console.log('我不见了！'); }); },click:function () { $('.box').show(2000,function () { console.log('我又出现了！'); }); },mouseout:function () { $('.box').fadeIn(2000,function () { console.log('我淡淡的出现！'); }); }}) </script> </html>
3 事件解绑（怎么绑定事件怎么解绑）
3.1 unbind() 方式
作用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件；解绑多个事件之间用空格隔开
unbind(type,[data|fn]])
type:删除元素的一个或多个事件,由空格分隔多个事件值。
fn:要从每个匹配元素的事件中反绑定的事件处理函数
3.2 undelegate() 方式
作用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click mouseenter” ); //解绑所有的click事件
3.3 off解绑on方式绑定的事件（重点）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
4 事件触发
简单事件触发（执行）
$(selector).click(); //触发click事件
trigger方法触发事件，页面点击触发浏览器行为
$(selector).trigger(“click”);
triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为
$(selector).triggerHandler(“focus”);
5 事件切换
hover([over,]out)；鼠标事件切换，代替了mouseover()/mouseout()说明：
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数：over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <button class="but">hover鼠标事件</button> <div class="box"> <p>https://blog.csdn.net/muzidigbig</p> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> $('.but').hover( function () { console.log('鼠标移动到元素上！'); $('.box').slideUp(2000); }, function () { console.log('鼠标离开元素！'); $('.box').slideDown(2000); } ) </script> </html>
若有不足请多多指教！希望给您带来帮助！