JQuery中的各种事件 柔光的暖阳◎ 2022-11-27 00:49 108阅读 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"); }) })
还没有评论,来说两句吧...