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 。