当前位置:Gxlcms > JavaScript > jQuery中的事件

jQuery中的事件

时间:2021-07-01 10:21:17 帮助过:33人阅读

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(){})

bind()方法其他用法:

(1)为一个元素一次性绑定多个事件类型

 
$("p").bind("mouseover mouseout",
function
(){};);


(2)添加事件命名空间,便于管理

3.合成事件

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

格式:hover(enter , leave);

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

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

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

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


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

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


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

4.事件冒泡

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

事件冒泡引发的问题:

(1)事件对象:event

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

(2)停止事件冒泡:event.stopPropagation()方法

(3)阻止默认行为:event.preventDefault()方法

例子:表单验证不符合提交条件时阻止表单的提交(默认行为)


$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>");
                     event.preventDefault();
              }
        })
})

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

5.事件捕获

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

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

6.事件对象的属性

属性和方法作用
event.type获取事件的类型
event.preventDefault()阻止默认的事件行为
event.stopPropagation()阻止事件冒泡
event.target获取触发事件的元素
event.relatedTarget返回当前事件涉及到的其他DOM元素
event.pageX和event.pageY获取到光不熬相对于页面的x和y坐标
event.which在鼠标事件中获取鼠标的左、中、右键 ;在键盘事件中获取键盘的按键
event.metaKey在键盘事件中获取<ctrl>键

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

(2)在标准DOM中,mouseover和mouseout所发生的元素都可以通过event.target访问,相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement,在mouseout中相当于IE的event.toElement。

(3)在JS中,IE用event.x和event.y;Firefox用event.pageX/event.pageY。如果页面有滚动条,还要加上滚动条的宽度和高度。

6.移除事件

(1)移除按钮元素上已有的事件:$("#btn").unbind();

格式:unbind([type],[data]);

第一个参数是事件类型,第二个参数是将要移除的函数

①如果没有参数,删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数,只有特定的事件处理函数会被删除。

(2)移除<button>元素中的其中一个事件

在绑定时要给匿名函数指定一个变量


$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      })
})

单独移除某个绑定事件


$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

注意:对于只需要触发一次就要立即解除绑定的情况,使用one()方法。one()方法可以为元素绑定处理函数,当处理函数触发一次后,立即被删除。即:在每个对象上,事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

以上就是jQuery中的事件的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行