jQuery中的事件

Posted 2020-09-29 苯宝宝

1.加载DOM

在页面加载完毕后，JS用window.onload为DOM元素添加事件，jQuery中，用$(document).ready()为DOM元素添加事件，使用该方法可以在DOM载入就绪时对其进行操作并调用执行它所绑定的函数。

window.onload和$(document).ready()对比

	window.onload=function(){}	$(document).ready(function(){})
执行机制	必须等到网页中的所有内容加载完毕后（包括图片）	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个	可以同时编写多个
简化写法	无	$(document)可以简写为$(),不带参数时默认为document，因此可简写为： ①$(document).ready(function(){}) ②$(function(){})
对比		极大地提高了Web应用程序的相应速度
缺点		元素的关联文件未下载完，造成某些属性的无效
解决办法		使用另一个关于页面加载的方法——load()方法

 

 

 

 

 

 

 

 

 

补充：load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，会在元素的内容加载完毕后触发。

1 $(window).load(function(){
2 //编写代码
3 })

 

2.事件绑定— —bind()方法

格式：bind(type [, data] , fn)

第一个参数是事件类型：blur、focus、load、unload、resize、scroll、click、dblclick、mousedown、mouseover、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error

第二个参数是可选参数，作为evert.data属性值传递给事件对象的额外数据对象

第三个餐食是用来绑定的处理函数

补充：判断一个元素是否显示，jQuery中用is()方法

简写：.mouseover(function(){})

 

3.合成事件

hover()方法：模拟光标悬停事件

格式：hover(enter , leave);

当光标移动到元素上时，会触发指定的第一个函数，当光标移除这个元素时，会触发指定的第2个函数

替代事件：bind("mouseenter")和bind("mouseleave")

 

toggle()方法：模拟鼠标的连续单击事件

格式：toggle(fn1,fn3......fnN);

1 $(function()){
2       $("#panel").toggle(function(){
3                $(this).next().show();
4        },function(){
5                 $(this).next().hide();
6        })
7 })

补充toggle还有另一个作用：切换元素的可见状态。如果元素课件，单击后切换为隐藏。如果元素是隐藏的，单击切换后为可见

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

 

4.事件冒泡

 冒泡：嵌套元素相应同一个事件的执行顺序，事件按照DOM的层次结构向上直至顶端

事件冒泡引发的问题：

（1）事件对象：event

创建事件对象只需要为事件处理函数添加一个参数event，对元素执行事件时，事件对象就被创建了，这个对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁

（2）停止事件冒泡：event.stopPropagation()方法

（3）阻止默认行为：event.preventDefault()方法

例子：表单验证不符合提交条件时阻止表单的提交（默认行为）

1 $(function(){
2        $("#sub").bind("click",function(event){
3                var username=$("#username").val();
4                if(username==""){
5                       $(""#msg).html("<p>文本框内容不能为空</p>")；
6                       event.preventDefault();
7                }
8          })
9 })

 

如果想同时对事件对象停止冒泡和默认行为，可在事件处理函数中返回false

 

5.事件捕获

事件捕获和事件冒泡是想法的过程，事件捕获是从顶端往下开始触发 

并非所有的浏览器都支持事件捕获，jQuery也不支持

 

6.事件对象的属性

属性和方法	作用
event.type	获取事件的类型
event.preventDefault()	阻止默认的事件行为
event.stopPropagation()	阻止事件冒泡
event.target	获取触发事件的元素
event.relatedTarget

 

 

 

 

 

 

 

 补充：（1）JS中的stopPropagation()方法不兼容IE浏览器