JQuery中的常用事件、对象属性与使用方法分析

2020-05-24 21:48:27易采站长站整理

.triggerHandler()

触发事件,不会冒泡,不会触发默认事件

注:

1、以上事件函数有三种用法:


//直接绑定事件到元素上
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value) //通过对象e获取输入的值
});


//传递参数调用函数处理
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 通过e传递参数数据
});


//手动触发已绑定的点击事件
$elem.click()

2、mouseover与mouseenter区别:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,称作支持冒泡处理,冒泡处理指子元素与父元素共同定义的事件,在触发子元素时,或者没有定义子元素,事件就会向父级传播,引发父级事件触发。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

3、form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为。传统的方式是调用事件对象  e.preventDefault() 来处理, 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: "Mr.Tory"
}, greet );
function greet( event ) {
alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

事件对象的属性与方法