2023年7月9日发(作者：)

JQuery中的常⽤事件、对象属性与使⽤⽅法分析本⽂实例讲述了JQuery中的常⽤事件、对象属性与使⽤⽅法。分享给⼤家供⼤家参考，具体如下：JQuery中的常⽤事件.click().dblclick().mousedown()/up().mousemove().mouseover()/out().mouseenter()/leave().hover(func1,func2).focusin().focusout(). focus()/.blur().change().select().submit().keydown()/up().on().off().trigger(“event”).triggerHandler()注：1、以上事件函数有三种⽤法：//直接绑定事件到元素上$('.target1').keydown(function(e) { $("em:first").text() //通过对象e获取输⼊的值});//传递参数调⽤函数处理$("#test").click(11111,function(e) { //this指向 div元素 // => 11111 通过e传递参数数据});//⼿动触发已绑定的点击事件$()⿏标单击触发事件，参数可选（data，function）双击触发，同上⿏标按下/弹起触发事件⿏标移动事件⿏标移⼊/移出触发事件⿏标进⼊/离开触发事件*⿏标移⼊调⽤func1函数，移出调⽤func2函数⿏标聚焦到该元素时触发事件⿏标失去焦点时触发事件⿏标聚焦/失去焦点触发事件（不⽀持冒泡）表单元素发⽣改变时触发事件⽂本元素被选中时触发事件表单提交动作触发*键盘按键按下/弹起触发多事件的绑定移除事件的绑定触发事件event调⽤触发事件，不会冒泡，不会触发默认事件2、mouseover与mouseenter区别：不论⿏标指针穿过被选元素或其⼦元素，都会触发 mouseover 事件，称作⽀持冒泡处理，冒泡处理指⼦元素与⽗元素共同定义的事件，在触发⼦元素时，或者没有定义⼦元素，事件就会向⽗级传播，引发⽗级事件触发。只有在⿏标指针穿过被选元素时，才会触发 mouseenter 事件。3、form元素是有默认提交表单的⾏为，如果通过submit处理的话，需要禁⽌浏览器的这个默认⾏为。传统的⽅式是调⽤事件对象 tDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。 //回车键或者点击提交表单后禁⽌浏览器默认跳转： $('#target2').submit(function() { alert('捕获提交表达动作,阻⽌页⾯跳转') return false; });4、on()使⽤基本⽤法：.on( events ,[ selector ] ,[ data ] )最常见的给元素绑定⼀个点击事件，对⽐⼀下快捷⽅式与on⽅式的不同$("#elem").click(function(){}) //快捷⽅式$("#elem").on('click',function(){}) //on⽅式//多个事件绑定同⼀个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件$("#elem").on("mouseover mouseout",function(){ });//多个事件绑定不同函数$("#elem").on({ mouseover:function(){},

mouseout:function(){}});//将数据传递到处理程序$( "button" ).on( "click", { //第⼆个参数传递数据给函数调⽤ name: ""}, greet );function greet( event ) { alert( "Hello " + ); //输出Hello }事件对象的属性与⽅法./tDefalut()事件类型.如果使⽤⼀个事件处理函数来处理多个事件, 可以使⽤此属性获得事件类型,⽐如click事件调⽤时传⼊额外参数触发该事件的 DOM 元素指⽰按了哪个键或按钮该属性返回从 1970 年 1 ⽉ 1 ⽇到事件发⽣时的毫秒数相对于⽂档左/上边缘的⿏标位置上⼀个相同事件处理器函数返回的值阻⽌事件的默认动作.stopPropagation()取消事件冒泡$("#content").click(function(event) { $("#msg").html("

外层div元素被单击

"); opagation(); //通过event⽅法阻⽌事件冒泡});更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。