JQuery中的各种事件

柔光的暖阳◎ 2022-11-27 00:49 155阅读 0赞

##### 文档加载完成 #####

加载文档完成触发：

$(document).ready(function(){})

事件可以多次执行。  
代码可以简写为：

$(function(){})

##### 事件绑定 #####

bind(type、[data]、function)

**type为事件类型：**  
blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等

**data为方法传递的参数,可以忽略**

**function是用来绑定的处理函数.**  
eg：为id为box 的div的元素绑定单击事件。

$('#box').bind('click',function()
    	 {
    		 alert('被点击');
    	 }
    )

**绑定单个事件**

bind('事件名',function(){})
    on('事件名',function(){})

**绑定多个事件**

on({'事件名1':function(){},'事件名2':function(){},...})

eg:

$('div').bind('mouseover mouseout',function(){
    	 $(this).toggleClass('over');
    })

**bind跟on绑定事件的区别**  
主要是事件冒泡  
jquery1.7版本以后bind()函数推荐用on()来代替。

**多事件处理**  
1.利用空格分隔多事件  
绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

$(selector).bind("click dbclick mouseout",data,function(){});

2.利用大括号灵活定义多事件  
绑定较为灵活，可以给事件单独绑定函数

$(selector).bind({event1:function,event2:function, ...})

**hover()方法**  
此方法是一个合成事件，方法触发mouseenter 和 mouseleave 事件。  
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.

##### 事件移除 #####

**unbind()**

$('#box').unbind('click');

如果为同一个元素绑定了多个事件

$('#box').unbind('事件名称',fun1);

##### 事件冒泡 #####

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

**阻止事件冒泡**  
在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡。

也可以使用return false阻止冒泡。

event中还有一个方法：event.preventDefault();作用是阻止默认行为，如表单提交！

**mouseenter与mouseleave事件**

mouseover事件会触发事件冒泡  
所以推荐使用mouseenter事件

##### 模拟触发事件 #####

有时我们更希望让事件自动执行，而不用手动触发，或者在一个事件中调用另一个事件的处理函数。这时我们可以考虑使用模拟操作

$('box').click(function(){
    	$('#btn').trigger('click');//模拟操作触发的#btn的click事件.
    })

**模拟操作-传递数据**

trigger(type \[,data\])方法有两个参数

第一个参数是要触发的事件类型,  
第二个参数是传递给事件处理函数的附加数据,以数组的形式传递

$('#btn').bind('click',function(event,mes,mes2){
    	alert(mes+','+mes2);
    })
    $('#btn').trigger('click',['Hello','World!']);

注意:在事件绑定时的event参数是不可以省略的.但在调用时可以不指定。

**执行默认操作**  
triggerHandler()不会触发默认行为,而只执行事件代码.

$(function(){
    	$("#name").focus(function(){
    		$(this).css("border","1px solid#900");
    	})
    	$("#btn").click(function(){
    		$("#name").trigger("focus");
    	})
    	$("#btn2").click(function(){
    		$("#name").triggerHandler("focus");
    	})
    })