浅谈JavaScript之事件绑定

其实没有什么新的知识点，只是为了方便其他有需要的朋友们翻阅，对自己而言也算是一个积累，所以只能算是闲谈 JavaScript，老鸟们可以尽情飘过。
在进入正题之前，先提个问题热热身吧。
现在有如下 HTML 结构：

复制代码 代码如下:

<div>
 <input type="button" value="按钮一" />
 <input type="button" value="按钮二" />
 <input type="button" value="按钮三" />
 <input type="button" value="按钮四" />
 <input type="button" value="按钮五" />
</div>

复制代码 代码如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

for (var i = 0, l = inputs.length; i < l; i++) {
    inputs[i].onclick = function () {
        alert(i);
    }
}

复制代码 代码如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

for (var i = 0, l = inputs.length; i < l; i++) {
    (function (cur) {
        inputs[cur].onclick = function () {
            alert(cur);
        }
    })(i)
}

复制代码 代码如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

wrap.onclick = function (ev) {
    var ev = ev || window.event,
    target = ev.target || ev.srcElement;
    for (var i = 0, l = inputs.length; i < l; i++) {
        if (inputs[i] === target) {
            alert(i)
        }
    }
}

复制代码 代码如下:

var newInput = document.createElement('input');
newInput.setAttribute('type', 'button');
newInput.setAttribute('value', '按钮六');
wrap.appendChild(newInput);