task002_4-事件

发表于   |   分类于   |  

给一个element绑定一个针对event事件的响应，响应函数为listener

1
2
3
4
5
6
7
8
9
10
11
12
function addEvent(element, event, listener) {
    // chrome的方法    
    if (element.addEventListener) {
        element.addEventListener(event, listener, false); //false为事件冒泡
    // IE的方法
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, listener);
    // 古董IE的方法
    } else {
        element['on' + event] = listener;
    }
}

移除element对象对于event事件发生时执行listener的响应

1
2
3
4
5
6
7
8
9
function removeEvent(element, event, listener) {
    if (element.removeEventListener) {
        element.removeEventListener(event, listener, false);
    } else if (element.detachEvent) {
        element.detachEvent('on' + event, listener);
    } else {
        element['on' + event] = null;
    }
}

总结:

  • 事件流分为事件冒泡和事件捕获，前者由内而外，从直接相关的元素一层一层向外扩展；后者由外向内，从最外层的元素一层一层向内到直接相关的元素
    • html事件：直接在html里写onclick
    • dom 0级事件：通过getXXX获取元素，元素.onclick = function（）{}
    • dom 2级事件：有两个方法addEventListener()和removeEventListener()，两者都接受3个参数：①要处理的事件名、②作为事件处理程序的函数、③布尔值(true捕获阶段\false冒泡阶段)；addEventListener()后只能通过removeEventListener()删除；IE9之前使用attachEvent()和detachEvent()

3类事件Demo

实现对click事件的绑定

1
2
3
4
function addClickEvent(element, listener) {
    //调用之前的addEvent函数
    addEvent(element, 'click', listener);
}

实现对于按Enter键时的事件绑定

1
2
3
4
5
6
7
function addEnterEvent(element, listener) {
    addEvent(element, 'keydown', function(event) {
        if (event.keyCode === 13) {
            listener();
        }
    });
}

事件代理

对于ul嵌套多个li的场景，需要给每个li添加点击事件的监听，常规的办法是通过id给每个li单独绑定事件或者通过循环遍历li来增加点击事件。但是通过事件代理的方法只需要给li的父元素添加点击事件，然后通过事件冒泡来实现所要的效果。

1
2
3
4
5
<ul id="list">
    <li>Simon</li>
    <li>Kenner</li>
    <li>Erik</li>
</ul>

1
2
3
4
5
6
7
8
9
window.onload = function() {
    var list = document.getElementById('list');
    list.onclick = function(e) {
        var e = e || window.event,
            target = e.target || e.srcElement;
        alert(target.innerHTML);
        return false;
    }
}

在线demo