深入淺出 jQuery中的事件機制

更新時間：2016年08月23日 09:01:02 作者：學習會讓你青春永駐

本文重點給大家介紹jquery中的事件機制，涉及到onload和ready兩者的區(qū)別介紹，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧

首先呢,我們先來看一下,jQuery中的ready事件,它的作用有些類似于window中的onload事件,只不過二者的區(qū)別在于,onload事件是要等到網(wǎng)頁中的dom節(jié)點加載完成,并且css進行樣式渲染后,JavaScript中進行了預加載后再執(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ù),都去作用.
$(document).ready(function(){alert(1)})
$(document).ready(function(){alert(3)})
//這里的可以設置多個函數(shù),是指的對于同一個對象設置

　　那么我們再來看一下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(事件類型,事件處理函數(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();//這樣直接調用unbind函數(shù)會直接將所有綁定的事件都取消掉.
$('div').unbind('click');//這樣子就會將div里邊所有的click綁定的事件取消掉了
//直接解除指定的函數(shù)的綁定,這種方式也只能解除有名函數(shù)的綁定,不能解除指定的匿名函數(shù)的綁定
$('div').unbind('click',fa);
});

　　當然,在事件處理中,事件對象無疑是我們經常要使用的一個對象,在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中的基本一樣,總結起來呢,使用jQuery使我們不用去考慮兼容性問題,同時代碼量也大大的減少了.

以上所述是小編給大家介紹的jQuery中的事件機制，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: