文档加载完成
加载文档完成触发:
$(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\");})})