Js/事件處理

DOM0級

// 添加事件
var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("Clicked");
　　　　　console.log(this) // this指向當前元素
    };
// 刪除事件
btn.onclick = null

 

DOM2級

DOM2 級事件」定義了兩個方法，用於處理指定和刪除事件處理程序的操做:addEventListener() 和 removeEventListener()。全部 DOM 節點中都包含這兩個方法，而且它們都接受 3 個參數:要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是 true，表示在捕獲 階段調用事件處理程序;若是是 false，表示在冒泡階段調用事件處理程序。

var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){
    alert(this.id); 7
}, false);

使用 DOM2 級方法添加事件處理程序的主要好處是能夠添加多個事件處理程序

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
btn.addEventListener("click", function(){
    alert("Hello world!");
}, false);

這兩個事件處理程序會按照添加它們的順序觸發，所以首先 會顯示元素的 ID，其次會顯示"Hello world!"消息。

經過 addEventListener()添加的事件處理程序只能使用 removeEventListener()來移除;移 除時傳入的參數與添加處理程序時使用的參數相同。這也意味着經過 addEventListener()添加的匿 名函數將沒法移除。

 

react事件處理

• React 事件的命名採用小駝峯式（camelCase），而不是純小寫。
• 使用 JSX 語法時你須要傳入一個函數做爲事件處理函數，而不是一個字符串。
• 在 React 中另外一個不一樣點是你不能經過返回 false 的方式阻止默認行爲。你必須顯式的使用 preventDefault 。