首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义:
那么我们再来看一下onload和ready的第二个区别:
函数,都去作用.
$(document).ready(function(){alert(1)})
$(document).ready(function(){alert(3)})
//这里的可以设置多个
函数,是指的对于同一个对象设置
那么我们再来看一下jQuery中的事件绑定,这里我们一onclick事件来举例,当我们在js中进行事件绑定的时候,我们分为dom1级事件,dom2级事件,其中还包括对于IE浏览器的兼容性考虑,那么当我们使用jQuery中的事件机制时,就不用去考虑那么多了,jQuery内部已经帮我们做好了兼容性之类的操作,讲真,这真的是很方便了我们了:
SEOver(function(){
$(this).css('color','yellow');
});
});
这里的一个主意点就是当绑定事件时,事件名是不用写on的,其实我们还可以用另一种写法$('div').on('click',funciton(){});上面的那种写法就是这种写法的简化,二者的作用还是一样的.那么当我们需要给当前jQuery对象添加多个事件的时候,我们就可以使用bind方法来处理了:
函数(分为有名
函数,和匿名
函数))
$(function(){
//绑定一个鼠标移动上去处理的事件.
$('div').bind('mou
SEOver',function(){
$('div').css('background-color','blue');
});
$('div').bind('mou
SEOut','yellow');
});
//一个
函数绑定多个事件 这多个时间之间只需要用空格隔开.
//这个虽然可以绑定多个事件,但是
函数比较单一,不灵活.
$('div').bind('mou
SEOver mou
SEOut',function(){
console.log(1234);
});
//使用对象的形式来绑定多个事件,$('div').bind({
click: function(){console.log(1);},mou
SEOver: function(){alert(22);},mou
SEOut : function(){alert(33);}
});
//绑定有名的
函数
function fa(){alert("fa");};
function fb(){alert("fb");};
function fc(){alert("fc");};
$('div').bind('click',fb);
$('div').bind('click',fc);
$('div').unbind();//这样直接
调用unbind
函数会直接将所有绑定的事件都取消掉.
$('div').unbind('click');//这样子就会将div里边所有的click绑定的事件取消掉了
//直接解除指定的
函数的绑定,这种方式也只能解除有名
函数的绑定,不能解除指定的匿名
函数的绑定
$('div').unbind('click',fa);
});
当然,在事件处理中,事件对象无疑是我们经常要使用的一个对象,在js中,我们获取对象时还要考虑到兼容性问题,但是在jquery中,我们根本就不用考虑,只需要直接使用函数中传递的event参数就行了:
当然了,我们jQuery中的事件也是由键盘事件,鼠标事件,表单事件,甚至还有自定义的事件等等,和js中的基本一样,总结起来呢,使用jQuery使我们不用去考虑兼容性问题,同时代码量也大大的减少了.
以上所述是小编给大家介绍的jQuery中的事件机制。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/jquery/46394.html
