js事件绑定

1.ele.onxxx = function (event) {}

兼容性很好，但是一个元素只能绑定一个处理程序

var div = document.getElementsByTagName('div')[0];
div.onclick = function () {
    this.style.backgroundColor = 'green'
}

基本等同于写在HTML行间上

<div style="width:100px; height:100px; background-color:red;" onclick ="console.log('a')"></div>

on这种方式叫句柄的绑定方式；

---

2.ele.addEventListener(type, fn, false);

IE9以下不兼容，可以为一个事件绑定多个处理程序

var div = document.getElementsByTagName('div')[0];
div.addEventListener(事件类型, 处理函数, false)

div.addEventListener('click', function () {
    console.log('a')
}, false)

div.addEventListener('click', function () {
    console.log('b')
}, false)
//a
//b

div.addEventListener('click', function () {
    console.log('a')
}, false)

div.addEventListener('click', function () {
    console.log('a')
}, false)
//a
//a

这样写按顺序执行

div.addEventener('click', test, false);
div.addEventener('click', test, false);

function test() {
    console.log('a')
}
//a

在这里只执行一遍

ele.addEventListener可以给同一个对象的同一个事件绑定多个处理函数，多个处理函数地址是不一样的。
同一个函数不能绑定多次

---

3.ele.attachEvent(‘on’ + type, fn);

IE独有，一个事件同样可以绑定多个处理程序

var div = document.getElementsByTagName('div')[0];
div.attachEvent('on' + 事件类型， 处理函数)；

div.attachEvent('onclick', function () {
    console.log('a')
})

与 addEventListener 对比

1. 形式 上少了一个false
2. 在运行上与 addEventListener 基本上差不多
3. 同一个事件也可以绑定多个处理函数，并且一个对象的一个事件，绑定同一个函数多次，还可以执行多次
4. 缺陷；只有IE能用

---

小练习

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

给第一个 li 添加事件

var li = document.getElementsByTagName('li')[0];

li.addEventListener('click' function () {}, false)

给三个 li 都添加事件

var li = document.getElementsByTagName('li') //选出来的是一个组
for(var i = 0; i < li.length; i++) {
    li[i].addEventListener('click', function () {}, false)
}

---

题

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

使用原生 js， addEventListener, 给每个 li 原生绑定一个 click 事件， 要求输出他们的顺序。

var liCol = document.getElementsByTagName('li'),
    len = liCol.length;

for(var i = 0; i < len; i++) {
    liCol[i].addEventListener('click', function () {
        console.log(i);
    }, false);
}
//4
//4
//4
//4

正常的写法是这样，但是点击所有的li输出的都是4，因为形成了闭包，i到最后for循环执行完都变成了4
用立即执行函数解决闭包问题

var liCol = document.getElementsByTagName('li'),
    len = liCol.length;

for(var i = 0; i < len; i++) {
    (function (i) {
        liCol[i].addEventListener('click' function () {
            console.log(i);
        }, false)
    } (i))
}

绑定事件如果出现在循环里面，一定要注意，会出现闭包，解决方法就是，立即执行函数