事件物件 (jQuery 15)

官網連結

目前有19個：
preventDefault()：使事件的預設行為不觸發
isDefaultPrevented()：判斷有沒有執行過 preventDefault()

stopPropagation()：停止父輩層傳播，也就是停止冒泡
isPropagationStopped()：判斷有沒有執行過 stopPropagation()

stopImmediatePropagation()：停止同輩層傳播
isImmediatePropagationStopped()：判斷有沒有執行過 stopImmediatePropagation()

target：一開始的DOM元素
currentTarget：當前DOM元素
delegateTarget：正在調用jQuery事件的元素
relatedTarget：相關連的DOM元素，這個我試的結果，只有滑鼠事件才會觸發

data：回傳可選的…，我也不太會解釋，看下面的範例
metaKey：是否按下Meta鍵，一般不會有這個鍵，回傳布林值
namespace：回傳命名空間
pageX：左右的數字(最左邊是0，右邊要看解析度而定)
pageY：上下的數字(最上面是0，下面要看解析度而定)
result：回傳被觸發事件的最後返回值，沒有就回傳undefined
timeStamp：回傳1970年1月1日到現在的毫秒數
type：回傳事件名稱
which：回傳按鍵或滑鼠的數字
  ※滑鼠用mousedown，左、中、右鍵，分別回傳1、2、3；click事件只抓到左和中鍵，右鍵沒抓到，其他都回傳0
  ※keypress：回傳ASCII的數字，但ctrlKey、shiftKey、altKey抓不到
  ※keydown、keyup：回傳的英文是大寫的ASCII，數字左邊的和keypress一樣，都是回傳ASCII，但右邊的數字鍵盤回傳的是 96~105
  ※ctrlKey、shiftKey、altKey抓的到，但keyup都是顯示false；keydown回傳的很正確，不曉得和瀏覽器有沒有關係

※preventDefault、isDefaultPrevented

$(function(){
    $( "input" ).keydown(function(e) {
        alert(e.isDefaultPrevented());
        e.preventDefault();
        alert(e.isDefaultPrevented());
    });
});
----------
<input />

※按下鍵盤後，好像沒按一樣，因為取消了原本的行為

※stopPropagation、isPropagationStopped

$(function(){
    $( "div" ).click(function(e) {
        alert('div');
    });
    
    $( "p" ).click(function(e) {
        alert('p');
    });
    
    $( "span" ).click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※原本的行為是按span後，會跳出span、p、div，加了以後只會執行自己的

※stopImmediatePropagation、isImmediatePropagationStopped

$(function(){
    $('span').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopImmediatePropagation();
        alert('span1');
        alert(e.isPropagationStopped());
    });
    
    $('span').click(function(e) {
        alert('span2');
    });
});
----------
<span>span</span>

※原本span2會執行的，但加了stop就不會了，這個是以在html的順序為執行的順序，所以將span2放在span1前面還是會執行

※target

$(function(){    
    $("div").click(function(e) {
        alert(e.target.nodeName);
    });
    
    $("p").click(function(e) {
        alert(e.target.nodeName);
        alert($(e.target).is('SPAN'));
    });
    
    $("span").click(function(e) {
        alert(e.target.nodeName);
    });
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※因為是一開始的元素，所以往上冒泡時，都是一開始的那一個元素，如點span，執行到p和div都會出現span；點p，執行到div，也是出現p

※currentTarget、delegateTarget

$(function(){
    $("div").click(function(e) {
        alert(e.currentTarget.nodeName === e.delegateTarget.nodeName);
    });
    
    $("p").click(function(e) {
        alert(e.currentTarget.nodeName === e.delegateTarget.nodeName);
    });
    
    $("span").click(function(e) {
        alert(e.currentTarget.nodeName === e.delegateTarget.nodeName);
    });
});
----------
<div>
    div
    <p>
        p
        <span>span</span>
    </p>
</div>

※和target不一樣的地方在按p或div時，按的是p就是p，是div就是div；而target都是按的那一個

※兩者差別我分不出，官方也寫說這兩個總是一樣

※relatedTarget

$(function(){
    $('span').mouseover(function(e) {
        console.log(e.relatedTarget.nodeName);
    });
});
----------
<div>
    div
    <p>
        p
        <span>
            span
            <input />
        </span>
    </p>
</div>

※這個物件我試的結果很奇怪，結果不太一定，大部分是BODY，有時候又會出現HTML、P、SPAN

※which

$(function() {
    $('input').keyup(function(e){
        alert(e.which);
    });
});
----------
<input />

※ctrlKey、shiftKey、altKey雖然官網沒寫，但javascript有，回傳布林值，可以用debugger查看，會看到非常多，官網可能只訂一些較常用的而已

※data

$(function() {
    for (var i = 0; i < $('div').length; i++) {
        $('div').eq(i).click({xxx: i}, function(e) {
            alert(e.data.xxx);
        });
    }
});
----------
<div>A</div>
<div>B</div>
<div>C</div>

※xxx名稱要對應好

※type

$(function() {
    $('div').click(function(e) {
        alert(e.type);
    });
});
----------
<div>A</div>
<div>B</div>
<div>C</div>

※回傳click

※namespace

$(function() {
    $('div').on('aaa.bbb.ccc', function(e) {
        alert(e.namespace);
    });
});
    
function testCustomEven(){
    $('div').trigger('aaa.bbb.ccc');
}
----------
<div>div</div>
<button onclick="testCustomEven()">fire</button>

※回傳bbb.ccc

※result

$(function() {
    $('div').click(function() {
        return 'xxx';
    });
    
    $('div').click(function(e) {
        alert(e.result);
    });
});
----------
<div>div</div>

※回傳xxx；如果沒有寫第一個click，回傳undefined

※pageX、pageY

$(function() {
    $('html').click(function(e) {
        alert(e.pageX + ':' + e.pageY);
    });
});

※javascript是叫clientX、clientY，所以結果也是一樣

※javascript還有一組叫screenX、screenY，是包含整個螢幕的，所以數字和解析度一樣