深入浅出 jQuery中的事件机制

首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义:

//ready的作用,是为具体加载的实现.$(document).ready(function(){alert('1234');});//第二种,少了一个document,创建一个空的jQuery对象.$().ready(function(){alert('abcd');});//第三种,简写版的,$(function (){alert('23333');});

那么我们再来看一下onload和ready的第二个区别:

//如果有两个window.onload它只会执行最后一个.如果有多个的话,后边的会将前面的覆盖掉.window.onload=function(){alert(1);}window.onload = function(){alert(2);}//而window.ready 则可以设置多个函数,都去作用.$(document).ready(function(){alert(1)})$(document).ready(function(){alert(3)})//这里的可以设置多个函数,是指的对于同一个对象设置

　　那么我们再来看一下jQuery中的事件绑定,这里我们一onclick事件来举例,当我们在js中进行事件绑定的时候,我们分为dom1级事件,dom2级事件,其中还包括对于IE浏览器的兼容性考虑,那么当我们使用jQuery中的事件机制时,就不用去考虑那么多了,jQuery内部已经帮我们做好了兼容性之类的操作,讲真,这真的是很方便了我们了:

//DOM1级事件var itNode = document.getElementById('id');itNode.onclick = function(){};div.onclick = null; DOM1级中解除事件绑定//DOM2级事件itNode.addEventListener('click',function(){});itNode.removeEventListener();itNode.attachEvent();//IE 6 8 7 兼容性处理detachEvent(); IE中接触事件绑定//使用jQuery来操作绑定事件//$().事件类型(function(){});//$().事件类型();$(function(){$('div').click(function(){//给div绑定了一个onclick事件$('div').css('color','green');});$('div').mouseover(function(){$(this).css('color','yellow');});});

　　这里的一个主意点就是当绑定事件时,事件名是不用写on的,其实我们还可以用另一种写法$('div').on('click',funciton(){});上面的那种写法就是这种写法的简化,二者的作用还是一样的.那么当我们需要给当前jQuery对象添加多个事件的时候,我们就可以使用bind方法来处理了:

//$().bind(事件类型,事件处理函数(分为有名函数,和匿名函数))$(function(){//绑定一个鼠标移动上去处理的事件.$('div').bind('mouseover',function(){$('div').css('background-color','blue');});$('div').bind('mouseout',function(){$('div').css('background-color','yellow');});//一个函数绑定多个事件 这多个时间之间只需要用空格隔开.//这个虽然可以绑定多个事件,但是函数比较单一,不灵活.$('div').bind('mouseover mouseout',function(){console.log(1234);});//使用对象的形式来绑定多个事件,$('div').bind({click: function(){console.log(1);},mouseover: function(){alert(22);},mouseout : 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);});