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 。