AI智能
改变未来

JQuery中的各种事件


文档加载完成

加载文档完成触发:

$(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\");})})
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » JQuery中的各种事件