绑定事件监听函数

最新推荐文章于 2023-08-08 16:12:21 发布

gwj41

最新推荐文章于 2023-08-08 16:12:21 发布

阅读量707

点赞数

分类专栏： IE</div> 浏览器</div> JavaScript</div>

本文链接：https://blog.csdn.net/gwj41/article/details/78667147

版权

JavaScript</div> 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

IE</div>

3 篇文章 0 订阅

订阅专栏

浏览器</div>

2 篇文章 0 订阅

订阅专栏

最近一直在看《精通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 οnlοad="init();">
  <input name="test1" type="button" id="button1" value="click me" />
 </BODY>