JavaScript---事件綁定 (多種方式、傳遞參數）

事件綁定方式：將對html元素或窗口的操作綁定給響應函數的方式。共四種方式

Html級別綁定
符合DOM0 級的事件綁定方式
符合DOM2

Html級別綁定

無法設置事件流

<script>
    function a(){
        //好的習慣，把整個網頁上所有的事件綁定程序，聚集在一個函數中
        alert("nihao");
    }
</script>
<input type="button" value="html級別綁定方式" onclick="a()" />

符合DOM0 級的事件綁定方式

將響應程序直接賦值給dom元素的事件屬性。這是DOM最早版本的事件綁定方式，被所有瀏覽器兼容

無法設置事件流

1、是用普通函數作為響應程序

document.getElementById("btn1").onclick = sayHellow; 不要帶（）, 帶着（）表示直接調用·

<h2>DOM0級別的綁定方式</h2>
<input type="button" id="btn1" value="DOM0級別的綁定方式" />
<script>
    window.onload=function(){
        document.getElementById("btn1").onclick = sayHellow; //注意不要帶（）
    }
    
    function sayHellow(){
        alert("hi==")
    }
</script>

2、是用匿名函數作為響應程序

document.getElementById("btn2").onclick = function(){ alert("hi："+this.id) }
或者
document.getElementById("btn2").onclick = _ => console.log("hi123ID："+this);  //參考我的博客：JavaScript箭頭函數（Lambda表達式）

彈出： btn1

特點：

在響應函數中this代表目標元素(當前的button對象)
不符合DOM2標准，無法設定事件流
無法直接傳遞參數，但可以通過其他方式傳遞
對同一個事件只能綁定一個響應函數，最后綁定的響應函數會執行
通過 obj.onxx = null 可以解除綁定。

總結：可以使用匿名函數或普通函數作為響應函數

傳遞參數的方式：

傳遞參數的方法1 ---將參數作為屬性賦給事件源

<input type="button" id="btn3" workerNum=987 value="屬性傳遞參數" />

document.getElementById("btn3").onclick = function(){
            alert("hi："+this.getAttribute("workerNum"));
        }

傳遞參數方法2

使用綁定函數，專門設置一個函數，實現兩重調用（綁定）

        <input type="button" id="btn4" workerNum="==屬性參數==" value="動態綁定事件並傳遞參數" />

        //綁定函數
        bindEvent(document.getElementById("btn4"),"onclick",onclickWorker,"btn=123");
        
        //響應函數
        function  onclickWorker(wNum){ alert("工號為："+ wNum); }
        
        //執行事件綁定，將參數傳給事件源
        function bindEvent(dom, eventType , fun ,args){
            dom[eventType] = handleEvent;
            function handleEvent(){ //閉包
                fun.call(this,args);  //給響應函數的 this 指針賦值為 dom
            }
        }

其實綜合起來就是一句話：document.getElementById("btn4")["onclick"]= _ => onclickWorker("99999”);

傳遞參數方法3

JS中的call、apply、bind方法詳解

符合DOM2級別的事件綁定方式：（不兼容）

綁定后可以設定事件流的順序，順序為綁定順序。

格式：addEventListener("eventType",callback,use-capture);

eventTye：事件名稱。 click 省略on
callback：事件處理方法
use-capture：false-->冒泡階段/ture-->捕獲階段。

ps:大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器

//瀏覽器可以自動傳入一個對象 event對象
/*document.getElementById("outerDiv").addEventListener("click" , function(){
        //執行語句
})*/ //匿名函數方式
                
document.getElementById("outerDiv").addEventListener("click" ,handleEvent ); //綁定函數方式

特點：

可以使用匿名函數或普通函數

響應函數中this代表目標函數

可以設定事件流

無法傳遞參數，通過其他方式傳遞

對同一個事件可以綁定多個形影函數，響應函數執行順序依據綁定順序

建議使用jquery 的on方法解決綁定函數兼容方式

1、可以傳遞參數

2、實現了事件委托

3、on方法可以實現事件流控制

4、在一般的瀏覽器都兼容

參數	說明
elementObject	DOM對象（即DOM元素）。
eventName	事件名稱。注意，這里的事件名稱沒有“ on ”，如鼠標單擊事件 click ，鼠標雙擊事件 doubleclick ，鼠標移入事件 mouseover，鼠標移出事件 mouseout 等。
handle	事件句柄函數，即用來處理事件的函數。
useCapture	Boolean類型，是否使用捕獲，一般用false 。true:捕獲模型；false：冒泡模型