锋利的JQuery学习之JQuery中的事件
一、加载DOM
在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(document).ready();方法。此方法替代javascript中的window.onload()方法,可以极大地提高web应用程序的响应速度。通过该方法可以在dom就绪时就对其进行操作并调用为其绑定的事件。
区别:
1、执行时机
window.onload():网页中所有元素都加载到浏览器之后才能对其进行操作
$(document).ready():dom元素就绪之后就能对其进行操作,不需要等到所有关联文件都下载完毕
2、多次引用
window.onload():一次只能保存对一个函数的引用,如果引用多次,后面的函数会覆盖前面的;
$(document).ready():每次调用都会在现有行为上追加新的行为,这些行为函数会根据注册顺序依次执行;
通俗点讲,就是当多次调用时,前者只生效最后一次调用,后者则全部生效,且按照调用顺序执行其内的函数(事件)
3、简写方式
只针对jquery有简写方式:
$(document).ready(function(){}); == $(function(){});
二、事件绑定
1、绑定方式:bind(事件类型,参数,执行函数)
事件类型有blur/focus/load/resize/scroll/unload/click/dblclick/mousedown/mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/change/selsect/
submit/keydown/keypress/keyup/error等,也可以自定义,不过我没试过自定义的方法!!
2、当对同一个元素进行操作的时候,可以使用链式操作,绑定多个事件
3、简写
以click事件为例:$(ele).bind("click",function(){}); == $(ele).click(function(){});
三、合成事件
jquery有两个合成事件:hover()和toggle()
1、hover(enter,leave):模拟鼠标悬停事件,当光标移入元素时执行enter,当光标移出时执行leave函数
2、toggle(fun1,fun2,fun3..):模拟鼠标连续点击事件,按照顺序轮番执行绑定的函数
注意事项:
1⃣️hover模拟的是mouseenter和mouseleave函数,而不是mouseover和mouseout函数,所以当触发hover中的leave方式时需要调用trigger("mouseleave");
2⃣️css中的伪类选择器:hover也能实现鼠标悬停时改变元素外观的效果;
四、事件冒泡和事件捕获
看了很多解释,按照自己的理解,事件冒泡和事件捕获都是针对元素嵌套且都绑定相同事件的情况。其中:
事件冒泡:就是指触发内层元素绑定的事件时,该元素及其父级元素的事件都会被触发,且由内而外依次执行;
事件捕获:就是指触发内层元素绑定的事件时,该元素及其父级元素的事件都会被触发,且有外到内依次执行;
它们的区别就是事件触发的顺序不同。
举个例子:
1、事件冒泡
事件冒泡会先从最外层元素捕获触发的相同事件,在触发事件的元素上停止,然后由内而外冒泡执行,它是先捕获后冒泡。
第一步:创建嵌套元素
<div class="div2"> <h4>测试事件冒泡</h4> <div class="div21">我是第一个div <div class="div22"> 我是第二个div <span class="div23" style="display: block;">我是span</span> </div> </div> </div>
第二步:绑定click事件
$(".div2").bind("click",function(event){ console.info("我是父级div"); }); $(".div21").bind("click",function(event){ console.info("我是第一个div"); }); $(".div22").bind("click",function(event){ console.info("我是第二个div"); }); $(".div23").bind("click",function(event){ console.info("我是span"); });
第三步、点击最内层元素,测试结果
第四步、阻止事件冒泡
阻止事件冒泡的方法有两种:event.stopPropagation()和return false;将上面例子中的倒数第一个元素处阻止冒泡,则点击最内层元素,事件会在执行到第二个div后停止执行,即停止冒泡。
//事件冒泡:给div2及内部元素绑定事件 $(".div2").bind("click",function(event){ console.info("我是父级div"); /* console.info("事件类型:"+event.type); console.info("触发事件的元素:"+event.target); */ }) $(".div21").bind("click",function(event){ console.info("我是第一个div"); /* console.info("触发事件的元素:"+event.target); event.preventDefault();//这个地方没有用,因为冒泡不是默认行为 return false; */ }) $(".div22").bind("click",function(event){ console.info("我是第二个div"); /* console.info("触发事件的元素:"+event.target); */ event.stopPropagation(); }) $(".div23").bind("click",function(event){ console.info("我是span"); /* console.info("触发事件的元素:"+event.target); //阻止事件冒泡 event.stopPropagation(); */ });
点击最内层元素查看效果图
可看出在执行到倒数第二个div的时候就停止冒泡了。
2、事件捕获
事件捕获会从最外层元素向内遍历,捕获到一个相同事件就执行,在触发该事件的元素处停止继续捕获。
第一步:创建嵌套元素
<div class="div3" id="div3"> <h4>测试事件捕获</h4> <div class="div31" id="div31">我是第一个div <div class="div32" id="div32"> 我是第二个div <span class="div33" id="div33" style="display: block;">我是span</span> </div> </div> </div>
第二步:绑定事件
注意:jquery不支持事件捕获,所以只能用原生js实现,事件冒泡也可以用原生js实现,当第三个参数为false时为事件冒泡,为true时为事件捕获,如下所示:
//事件捕获:参数依次是 事件名称 事件体 捕获(true)OR冒泡(false或缺省) //Jquery不支持事件捕获,只能用原生js document.getElementById("div3").addEventListener("click",function(e){ console.info("我是父级div"); },true); document.getElementById("div31").addEventListener("click",function(e){ console.info("我是第一个div"); },true); document.getElementById("div32").addEventListener("click",function(e){ console.info("我是第二个div"); },true); document.getElementById("div33").addEventListener("click",function(e){ console.info("我是span"); },true);
第三步:点击最内层元素查看效果
上面的执行结果中,事件是从外到内依次执行的。
第四步:在第一个div处执行return false停止事件捕获
//事件捕获:参数依次是 事件名称 事件体 捕获(true)OR冒泡(false或缺省) //Jquery不支持事件捕获,只能用原生js document.getElementById("div3").addEventListener("click",function(e){ console.info("我是父级div"); },true); document.getElementById("div31").addEventListener("click",function(e){ console.info("我是第一个div"); return false;//该方法无法阻止事件捕获 },true); document.getElementById("div32").addEventListener("click",function(e){ console.info("我是第二个div"); e.stopPropagation();//通过该方法可以阻止事件捕获 },true); document.getElementById("div33").addEventListener("click",function(e){ console.info("我是span"); },true);
上面的代码中,我在第一个div处使用了return false;来停止事件不捕获,在第二个div处使用stopPropagation()来停止事件捕获,现在点击最内层的span元素,查看效果如下:
从执行结果来看,return false 并没有起到阻止事件捕获的效果,所以事件冒泡和事件捕获的停止方式应该使用stopPropagation()方法;
最后还有一个阻止事件默认行为执行的方法,是preventDefault()方法,举个例子说明该方法的用处:
当一个表单中的按钮为submit类型时,如果我么点击该按钮就会提交表单,但是有时候我们需要对表单进行验证,比如用户名和密码不能为空,如果是空就不能提交表单,此时的控制表单不能提交就可以使用preventDefault()方法,也可以使用rerurn false,以个人经验来看,还是用return false比较多。
五、事件对象的属性
1、event.type 获取事件类型
2、event.preventDefault() 阻止事件默认行为的发生
3、event.stopPropagation() 阻止事件冒泡
4、event.target 获取触发事件的元素
5、event.relatedTarget 获取事件发生的相关元素
6、event.pageX event.pageY 获取光标相对于页面的x坐标和y坐标
7、event.which 在鼠标单机事件中获取到鼠标的左、中、右键,在键盘事件中获取键盘的按键,即按下哪个键,就获取此键的键值
8、event.metaKey 在键盘事件中获取ctrl按键
六、其他
1、事件移除
使用unbind方法,可以移除所有绑定的事件,也可以移除指定的事件,移除指定事件时,想要在绑定的时候定义事件的名称
如下所示:
//绑定事件:绑定多个事件并赋予不同的函数名 $(".div52").bind("click",fun1 = function(){ console.info("我是第一个事件"); }).bind("click",fun2 = function(){ console.info("我是第二个事件"); }).bind("click",fun3 = function(){ console.info("我是第三个事件"); }); //解除事件:根据事件名移除指定的事件 $(".div51").hover(function(){ $(".div52").unbind("click",fun1); },function(){ $(".div52").unbind("click",fun3); });
温馨提示:如果有某个事件执行一次之后就需要被移除,此后不再触发的需求,可以使用one方法
//绑定并解除事件:绑定的事件执行一次就被移除 $(".div53").one("click",function(){ console.info("我只触发一次"); }).one("mouseover",function(){ console.info("鼠标移入"); }).one("mouseout",function(){ console.info("鼠标移出"); });
2、事件触发
使用trigger(事件类型)的方式
3、传递数据
在绑定事件的时候,可以给函数传递参数,并在函数体中使用
4、为一个元素绑定多个事件
可以使用链式也可以使用将事件类型用空格方式隔开,前者可以针对不同的事件类型实现不同的操作,后者则是不同类型的事件完成相同的功能。
本文来自博客园,作者:bug改了我,转载请注明原文链接:https://www.cnblogs.com/hellowhy/p/8998943.html