探究綁定事件的this指向以及event傳參的小問題

this指向

---

直接上代碼，湊合着看

<input type="button" onclick="page()" value="點我"></input>
<input type="button" value="點我2號" id="btn"/>
<input type="button" value="點我3號" id="btn2"/>
<input type="button" value="點我測試addEventListener傳參" id="btn-parem"/>
<input type="button" value="我是ie終結者，趕忙點我" id="ie-end">

<script>
    //該函數用於測試頁面上的this對象
    function page(){
        console.log(this==window)
//        true 說明頁面上綁定的事件的做用域都是window，這樣很很差，由於有時候咱們是但願咱們的this值就是當前的對象而不是window
    }

    var btn=document.getElementById("btn");
    btn.onclick=function(){
        console.log(this);
//        這個時候就正常了，輸出的this指向的是當前的input對象
    };

    var btn2=document.getElementById("btn2");
    function btnClick(){
        console.log(this)
//        很明顯這也是正常的
    }
    btn2.addEventListener("click",btnClick,false);

//    關於addEventListener咱們再扯一個，怎麼往addEventListener裏面的函數傳參
    var btnParem=document.getElementById("btn-parem")
    function pare(a,b){
        console.log(a+b)
    }
//    btnParem.addEventListener("click",pare(1,2),false)
//    親，很明顯這種寫法是不行的，由於我還沒點擊事件就已經自動執行了

    btnParem.addEventListener("click",function(){pare(1,9)},false)

//    注意，關於attachEvent該事件是ie特有的綁定事件方式，同時該事件以及漸漸的被拋棄，在最新的ie edge中已經沒有了該事件轉而支持addEventListener
//    同時，在ie 9 10中也已經支持addEventListener事件
    var ieEnd=document.getElementById("ie-end")
    function ending(){
        console.log(this)
//        在支持該事件的瀏覽器下輸出window
    }
    ieEnd.attachEvent("onclick",ending)
</script>

---

怎麼向addEventListener中傳入event對象

---

<input type="button" id="btn" value="測試"/>

---

var btn=$("#btn");
btn.onclick=function(e){
    console.log(e);
}

這樣的寫法是正常的，能夠正確的傳入e，換成addEventListener的狀況就是這樣寫

function func(e){
    console.log(e);
}
btn.addEventListener("click",func,false)

此時能夠看到，咱們並無顯式的向func中傳入參數e。那麼當咱們想傳參的時候應該怎麼寫呢

function func(e,a,b){
    console.log(e);
    console.log(a+b);
}
btn.addEventListener("click",function(e){
    func(e,1,2);
},false)；

這就是正確的寫法，使用一個匿名函數包住咱們的func，同時在匿名函數中傳入參數e