本文共 2328 字，大约阅读时间需要 7 分钟。

DOM������������������������

1. ������������������

���������������

btns[0].onclick = function () {
    alert('hi');
};
btns[0].onclick = function () {
    alert('hao a u');
};

���������������������addEventListener������

btns[1].addEventListener('click', function () {
    alert(22);
});
btns[1].addEventListener('click', function () {
    alert(33);
});

IE9���������������������attachEvent���

btns[2].attachEvent('onclick', function () {
    alert(11);
});

2. ���������������������removeEventListener������

divs[0].onclick = null; // ������������������
divs[1].removeEventListener('click', fn); // ������������������
divs[2].detachEvent('onclick', fn1); // IE���������������

3. DOM���������

DOM���������������������������������������������������������������������������������������������������������������������������������������������������������������������������

// ������������
son.addEventListener('click', function() {
    alert('son');
}, true);
// ������������
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
}, false);

4. ���������������event���

���������������������������������������������

• ���������������window.event
• ���������������������������������e

������������������������������

• e.target������������������������������
• e.currentTarget������������������������������
• e.type���������������
• e.preventDefault()���������������������

5. ������������������

son.addEventListener('click', function(e) {
    e.stopPropagation();
});

6. ������������������������

ul.addEventListener('click', function(e) {
    e.target.style.backgroundColor = 'pink';
});

7. ������������������

• click���������������
• mousemove���������������
• contextmenu���������������
• selectstart���������������

8. ������������������

document.addEventListener('click', function(e) {
    console.log(e.clientX, e.clientY, e.pageX, e.pageY, e.screenX, e.screenY);
});

9. ������������

• keydown������������������������������������
• keyup���������������
• keypress���������������������������������������

10. ������������������

document.addEventListener('keyup', function(e) {
    console.log(e.keyCode);
});

11. ���������������������������s���������������������

search.addEventListener('keyup', function(e) {
    if (e.keyCode === 83) {
        search.focus();
    }
});