html中事件處理中的this和event對象

在用js編寫頁面事件處理代碼時，會常常涉及到this和event對象，但有時在採用不一樣的事件處理，尤爲是在與自定義的對象關聯時，這些對象的指向變的有些複雜。

本文來詳細介紹下各類場景下 這些對象 真正指向。

1、事件直接寫在html標籤中

一、案例1：

<button onclick="clickBtn()">測試</button>

處理代碼如

function clickBtn(){
        alert(this.location.href);
    }

這時的 this 是指向全局 Window對象。 

二、案例2：

<button onclick="clickBtn(this)">測試</button>

處理代碼如

function clickBtn(obj){
        alert(obj.innerHTML);
    }

這時的 上述方法中的 obj指向的是按鈕自己。也就是在 onclick="clickBtn(this)"傳入的this對象指向事件觸發的按鈕。

三、冒泡

<div onclick="clickBtn(this)"><button >測試</button></div>

由於html事件的冒泡特性，雖然上面的onclick事件寫在div上，這時不管是點擊按鈕仍是div區域，都會觸發div上綁定的事件。

但不管點擊的是哪一個，會發現 事件響應傳入的 this指向的是 div，不是button.

 

在這種方式下，咱們除了能夠將this對象傳給事件處理函數外，還能夠將event對象傳給事件處理函數。event對象包含了觸發事件的各類信息。

<button onclick="clickBtn(event)">測試</button>

四、事件響應函數爲對象的方法

咱們看下，若是事件響應的函數爲對象的方法，會出現什麼變化。

<button onclick="handleDemo.clickBtn(this)">測試</button>

代碼以下

<script>
    function HandleDemo(){
        this.msg="good";
    }
    HandleDemo.prototype.clickBtn=function(obj){
        alert(obj.innerHTML);
        alert(this.msg);
    }
    var handleDemo = new HandleDemo();
</script>

這時會發現 clickBtn 方法中的 this 指向的是 handleDemo 對象。 參數obj由於是傳入的，指向的是button對象，這個沒變。

說明：直接在html標籤中綁定事件，是一件很是很差的編碼習慣，強烈不建議推薦。下面咱們介紹用jquery進行事件處理。

 

2、利用jquery綁定事件

一、方式一：

<button id="btn">測試</button>

腳本代碼

<script>
    $("#btn").click(clickBtn);
    function clickBtn(event){
        alert(this.innerHTML);
        alert(event.currentTarget.innerHTML);
    }
</script>

上面代碼 經過調用jquery對象的 click方法，參數就是事件響應處理函數。
這個函數能夠帶一個參數，jquery會把事件對象event傳入。參數名能夠是任意的，不必定叫event。

若是不定義參數，在函數中也可直接使用event。但通常若是須要用到event對象，最好顯式定義下。

這時咱們會發現，在函數體中直接使用的this指向的是 button對象。 咱們能夠不顯示的定義對象，採用匿名函數的方式，如：

<script>
    $("#btn").click(function(ev){
        alert(this.innerHTML);
        alert(ev.currentTarget.innerHTML);
    });
</script>

這個代碼與上面代碼的效果徹底同樣。

咱們再來看下，若是傳給click方法的是對象的方法呢？

<script>
    function HandleDemo(){
        this.msg="good";
    }
    HandleDemo.prototype.clickBtn=function(ev){
        alert(this.innerHTML);
        alert(ev.currentTarget.innerHTML);
    }
    var handleDemo = new HandleDemo();
    
    $("#btn").click(handleDemo.clickBtn);
</script>

這時，咱們發現clickBtn中的 this指向的依然是 button對象，並非咱們想象中的 handleDemo對象。

這樣就帶來一個很大的問題，由於clickBtn方法是handleDemo對象的成員，若是咱們想要在clickBtn方法中訪問handleDemo對象的其它成員，卻沒辦法了。

除非直接使用全局變量，而這是很不推薦的。

下面咱們介紹jquery的另一種事件綁定方法。

 

二、方式二：bind方法

html代碼依然不變

<button id="btn">測試</button>

腳本代碼

<script>
    function clickBtn(ev){
        alert(this.innerHTML);
        alert(ev.currentTarget.innerHTML);
    }
    $("#btn").bind("click",clickBtn);
</script>

這時，事件處理方法依然有一個參數指向event對象。

咱們發現 clickBtn中的 this 指向的是 button對象。
bind函數，有三個參數，第一個是表明事件類型；第二個是傳遞給事件處理的額外信息對象（會賦值給event的data屬性）；第三個是事件處理函數。

上面例子咱們只使用了第1個和第3個。下面咱們看下例子：

<script>
    function clickBtn(ev){
        alert(this.innerHTML);
        alert(ev.currentTarget.innerHTML);
        alert(ev.data.msg);
    }
    $("#btn").bind("click",{msg:"hello"},clickBtn);
</script>

採用這種方式，咱們傳遞了額外的對象給事件處理函數。這在某些場景下仍是能用到的。

下面咱們看下這種方式下傳入的事件處理函數是對象的方法：

<script>
    function HandleDemo(){
        this.msg="good";
    }
    HandleDemo.prototype.clickBtn=function(ev){
        alert(this.innerHTML);
        alert(ev.currentTarget.innerHTML);
        alert(ev.data.msg);
    }
    var handleDemo = new HandleDemo();

    $("#btn").bind("click",handleDemo,handleDemo.clickBtn);
</script>

咱們能夠將對象自己做爲bind方法的第二個參數傳入。以解決在方法中沒法訪問對象其它成員的問題。

注意：採用jquery的事件綁定，不管是用bind方法，仍是上一種方法。 若是調用屢次，會綁定屢次，而不會後面的覆蓋前面的，事件觸發時，事件函數會被屢次執行。