JavaScript - EventListener

HTML 事件处理

在 html 标签中直接注入事件方法

缺点是:

这种入侵式会破坏原来的html结构,

并且如果需要对一系列的button做事件修改,

需要修改所有的 onclick

<button id="btn1" onclick="demo()">button</button>

function demo(){
    alert(1);
}

 

Dom0级事件

吧一个函数复制给一个事件处理程序属性

缺点:

1. 如果有多个需要绑定的事件, 需要都遍历绑定一遍, 消耗性能

2. 无法给新添加的元素绑定

<button id="btn1">button</button>

var btn1 = document.getElementById("btn1");
btn1.onclick = function (){ alert(1); }
// 这种事件绑定方式会依照顺序覆盖掉之前的绑定
btn1.onclick = function (){ alert(2); }

 

Dom2级事件

估计是跟上面的绑定方式一样, 未探究

var x = document.getElementById("btn1");

x.addEventListener("click", fun1);
//JavaScript 可以重复添加对一个对象的 事件监听
x.addEventListener("click", fun2);

function fun1(){}
function fun2(){}

 

事件委托:

利用冒泡的原理, 将事件的处理交给第三方(某个父级元素?)来处理.

优点:

1. 只用绑定一次

2. 能为新添加的元素进行绑定.

window.onload = function () {
    var oUl = document.getElementById("newsList");
    var aLi = oUl.getElementsByTagName("li");

    oUl.onclick = function (ev) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == "li") {
            alert(1);
        }
    }
}

 

事件对象

x.addEventListener("click", fun1);

function fun1(e){
    e.type // "click"
    e.target // Object HTMLButtonElement  (button id = "btn1")

    e.stopPropagation() // 阻止事件的冒泡 ( 只执行最里层的 )
    e.preventDefault() //  阻止事件默认的行为 , 列入 <a> 的 href
}

 

这里暂时不讨论 基于 JQuery 下的 .bind()  .click() .on() 等事件绑定方式