jquery事件冒泡和事件對象的講解及jquery實現圖片跟著鼠標走

和js的相應函數一致,jquery中若響應函數若返回false,可以取消指定元素的默認行為,比如submit的提交,和a的超鏈接的跳轉,一個方法中只要有ruturn方法就會結束,不在往下執行,return的目的是讓submit等默認的行為失效,也就是說return true也會使方法停止方法不在往下執行,但默認行為不會失效,要想失效只能return false。

事件冒泡:事件會根據 dom的層次結構像水泡一樣不斷從下到頂端

解決方式:處理函數中返回false,會對事件停止冒泡,而且還停止了元素的默認行為

內層span

$(function(){

$("body").click(function(){alert("bodyclick");})

})

$("#content").click(function(){alert("dicClick");})

})

$("span").click(function(){alert("span click");

})

如果我們點擊body,會輸出body click

如果點擊div,會輸出 body click div click

如果點擊span,會輸出body click div click span click

之所以出現這種原因就是因為span在div內,div在body內,所以點擊span就相當於點擊div,點擊div就相當於點擊body,所以點擊span會出發三個事件機制,這既是事件冒泡,要想防止這種情況出現,需要在每個函數的最後添加return false就可以防止冒泡了

對然return false可以解決這個問題,但是兼容性不是很強,那麼如何才能提高兼容性呢?

可以使用e。stopPrppagation(),e為事件對象

具體用法為:$(function(){

$("body").click(function(){alert("bodyclick");})

$("#content").click(function(e){alert("dicClick");e。stopPrppagation();})

$("span").click(function(e){alert("span click");e。stopPrppagation()})

})

e。stopPrppagation()為阻止事件冒泡,但是沒有取消事件的默認行為,要想阻止事件的默認行為,還可以在調用事件對象的preventDefault()方法

事件對象

jquery中獲取事件觸發光標的x,y座標是通過 事件對象.pageX, 事件對象.pageY的方式獲取,這個和js中是有區別的,要注意,事件對象.target可以獲得觸發事件的元素最根級的觸發元素,冒泡的起始),事件對象.target和this不是一個東西

jquery事件冒泡和事件對象的講解及jquery實現圖片跟著鼠標走

假如上面是頁面結構,給tr,td還有p都添加了onclick事件,

點擊tr target是p this是tr

點擊td targer是p this是td

點擊p target是p this是p

p就是最根級的元素,所以無論點擊哪一個target都是p,而this就是點擊哪一個就是哪一個,這要區分

當觸發事件時,事件對象就會被創建,體現到程序中就是使用事件只需為函數添加一個參數,這參數就是對象

比如:獲取事件的x,y

$(function(){

$("body").onmouseover(function(event){

alert(event.pageX+event.pageY);

}

)

})

這裡就是通過在方法中寫上一個參數event,而這個參數就是事件對象了

事件對象還有屬性

which屬性:如果是鼠標事件則獲得按鍵(1左鍵,2中鍵,3右鍵)

altkey,shiftkey,ctrlkey屬性獲得alt,shift,ctrl是否按下為bool值

keyCode(鍵盤的,小鍵盤和主鍵盤的keycode不一樣)

charcode(Asc碼)

以前通過js的方式寫過圖片跟著鼠標走,下面寫一個jquery的方式實現,圖片跟著鼠標走

jquery事件冒泡和事件對象的講解及jquery實現圖片跟著鼠標走


分享到:


相關文章: