jQuery學習筆記8：事件對象

1    事件對象

<a href="http://s3.51cto.com/wyfs02/M02/12/59/wKioL1MEPf-wU6aFAAQDj3T3q5Q434.jpg" target="_blank"></a>

樣例：

   //通過event.type 屬性擷取觸發事件名

   $('input').click(function (e) {

   alert(e.type);

   });

   //通過event.target 擷取綁定的DOM 元素

   alert(e.target);

   target是擷取觸發元素的DOM，觸發元素，就是你點了哪個就是哪個；currentTarget得到的是監聽元素的DOM，你綁定的哪個就是那個。

   $('div').bind('click', function (e) {

       alert(e.target);

   //擷取綁定的那個DOM 元素，相當于this（e.currentTarget=this），差別與event.target

       alert(e.currentTarget);

   //擷取移入到div 之前的那個DOM 元素

   $('div').bind('mouseover', function (e) {

       alert(e.relatedTarget);

   //擷取移出div 之後到達最近的那個DOM 元素

   $('div').bind('mouseout', function (e) {

   通過event.data 擷取額外資料，可以是數字、字元串、數組、對象。如果字元串就傳遞：'123'、如果是數組就傳遞：[123,'abc']，如果是對象就傳遞：{user : 'Lee', age : 100}。數組的調用方式是：e.data[1]，對象的調用方式是：e.data.user。

   $('input').bind('click', 123, function () { //傳遞data 資料

   alert(e.data); //擷取數字資料

   $('input').bind('click', 'abc', function (e) {

       alert(e.data);

   $('input').bind('click', [1,2,3,'a','b'], function (e) {

       alert(e.data[3]);

   $('input').bind('click', {user : 'Lee', age : 100}, function (e) {

       alert(e.data.age);

   //判斷滑鼠左中右按鍵1、2、3

   $('input').bind('mousedown', function (e) {

       alert(e.which);

   //判斷鍵盤按鍵

   $('input').bind('keyup', function (e) {

2    冒泡和預設行為

   如果在頁面中重疊了多個元素，并且重疊的這些元素都綁定了同一個事件，那麼就會出

現冒泡問題，從最近元素超最大範圍冒。

<a href="http://s3.51cto.com/wyfs02/M00/12/63/wKiom1MFiz6TK-CWAAIgs65IfDA196.jpg" target="_blank"></a>

       //冒泡和阻止冒泡

       e.stopPropagation();                //禁止冒泡

       alert('input');

   //禁止表單送出

   $('input').click(function (e) {    

       e.preventDefault();

       alert('表單送出');

   $('form').submit(function (e) {   //推薦采用form方式

   //阻止冒泡又禁止了預設行為

   $('a').click(function (e) {

       alert('ycku.com');

       e.stopPropagation();

等效于

       return false;

     本文轉自stock0991 51CTO部落格，原文連結http://blog.51cto.com/qing0991/1360822：，如需轉載請自行聯系原作者