您的位置：首页 > 其它

绑定事件监听函数

2017-11-29 16:46 253 查看
最近一直在看《精通javascript》，很赞的书，顺便做一些小笔记。

今天看到了事件绑定方面的内容，分为传统绑定和W3C的DOM绑定

 

1. 传统绑定如下：

document.getElementById("button").onclick = function(e) {
// your code
alert(this.value);
 }

优点：不同浏览器都可以正常使用；可以使用this关键字，引用当前元素。
缺点：只会在事件冒泡时候运行；一个函数一次只能绑定一个事件处理函数，相同的事件处理函数互相覆盖；事件对象仅对非IE浏览器可用。
 
2. DOM绑定：W3C

void addEventListener(String type,
Function listener,
boolean useCapture);

 支持冒泡(false)捕获(true),this引用当前元素，同一个元素可以绑定多个事件，并且不会覆盖先前绑定的事件。

 不支持IE。

 

3. DOM绑定：IE

void attachEvent(String type, Function listener);

 同一个元素可以绑定多个事件，并且不会覆盖先前绑定的事件。

 仅支持冒泡阶段，this对象指向window对象，而不是当前元素

 根据API，可以在IE下获得当前元素，如下：

 

function init() {
var btn = document.getElementById("button1");
if (document.all)
{
// IE
btn.attachEvent('onclick',function(e) {
// Event.srcElement : A reference to the Window, Document,
// or Element object that generated the event.
alert(e.srcElement.value);
});
} else {
// 非IE
btn.addEventListener('click',function(e) {
//alert(this.value);
alert(e.target.value);
},false);
}
}

<BODY onload="init();">
<input name="test1" type="button" id="button1" value="click me" />
</BODY>

 
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航