首先呢,我們先來看一下,jQuery中的ready事件,它的作用有些類似于window中的onload事件,只不過二者的區(qū)別在于,onload事件是要等到網(wǎng)頁中的dom節(jié)點加載完成,并且css進行樣式渲染后,JavaScript中進行了預(yù)加載后再執(zhí)行,而ready事件呢,是在網(wǎng)頁中的標簽被解析為DOM節(jié)點是就執(zhí)行其中的函數(shù),直白點說,ready執(zhí)行的比onload早,那么我們在用jQuery的時候,需要做一個ready的執(zhí)行定義:
//ready的作用,是為具體加載的實現(xiàn).$(document).ready(function(){alert('1234');});//第二種,少了一個document,創(chuàng)建一個空的jQuery對象.$().ready(function(){alert('abcd');});//第三種,簡寫版的,$(function (){alert('23333');});那么我們再來看一下onload和ready的第二個區(qū)別:
//如果有兩個window.onload它只會執(zhí)行最后一個.如果有多個的話,后邊的會將前面的覆蓋掉.window.onload=function(){alert(1);}window.onload = function(){alert(2);}//而window.ready 則可以設(shè)置多個函數(shù),都去作用.$(document).ready(function(){alert(1)})$(document).ready(function(){alert(3)})//這里的可以設(shè)置多個函數(shù),是指的對于同一個對象設(shè)置 那么我們再來看一下jQuery中的事件綁定,這里我們一onclick事件來舉例,當我們在js中進行事件綁定的時候,我們分為dom1級事件,dom2級事件,其中還包括對于IE瀏覽器的兼容性考慮,那么當我們使用jQuery中的事件機制時,就不用去考慮那么多了,jQuery內(nèi)部已經(jīng)幫我們做好了兼容性之類的操作,講真,這真的是很方便了我們了:
//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(事件類型,事件處理函數(shù)(分為有名函數(shù),和匿名函數(shù)))$(function(){//綁定一個鼠標移動上去處理的事件.$('div').bind('mouseover',function(){$('div').css('background-color','blue');});$('div').bind('mouseout',function(){$('div').css('background-color','yellow');});//一個函數(shù)綁定多個事件 這多個時間之間只需要用空格隔開.//這個雖然可以綁定多個事件,但是函數(shù)比較單一,不靈活.$('div').bind('mouseover mouseout',function(){console.log(1234);});//使用對象的形式來綁定多個事件,$('div').bind({click: function(){console.log(1);},mouseover: function(){alert(22);},mouseout : function(){alert(33);}});//綁定有名的函數(shù)function fa(){alert("fa");};function fb(){alert("fb");};function fc(){alert("fc");};$('div').bind('click',fb);$('div').bind('click',fc);$('div').unbind();//這樣直接調(diào)用unbind函數(shù)會直接將所有綁定的事件都取消掉.$('div').unbind('click');//這樣子就會將div里邊所有的click綁定的事件取消掉了//直接解除指定的函數(shù)的綁定,這種方式也只能解除有名函數(shù)的綁定,不能解除指定的匿名函數(shù)的綁定$('div').unbind('click',fa);}); 當然,在事件處理中,事件對象無疑是我們經(jīng)常要使用的一個對象,在js中,我們獲取對象時還要考慮到兼容性問題,但是在jquery中,我們根本就不用考慮,只需要直接使用函數(shù)中傳遞的event參數(shù)就行了:
function(evt){var evt = evt || window.event;evt.preventDefault();//主流瀏覽器阻止默認事件evt.returnValue = false;// IE中阻止對象默認事件evt.stopPropagation();//主流瀏覽器中阻止瀏覽器冒泡evt.cancelBubble();//IE中阻止瀏覽器冒泡處理}$().bind('click',function(evt){//evt不用做兼容性處理evt.preventDefault();//阻止瀏覽器的默認動作.evt.stopPropagation();//阻止瀏覽器冒泡,}); 當然了,我們jQuery中的事件也是由鍵盤事件,鼠標事件,表單事件,甚至還有自定義的事件等等,和js中的基本一樣,總結(jié)起來呢,使用jQuery使我們不用去考慮兼容性問題,同時代碼量也大大的減少了.
以上所述是小編給大家介紹的jQuery中的事件機制，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
