JS常见面试问题

target与currentTarget区别

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

<div id="outer" style="background:#099;padding:20px 0;">  
    click outer  
    <p id="inner" style="background:#9C0;">click inner</p>   
</div>

<script type="text/javascript">
function G(id) {
  return document.getElementById(id);
}

function addEvent(obj, ev, handler) {
  if (window.attachEvent) {
    obj.attachEvent("on" + ev, handler);
  } else if (window.addEventListener) {
    obj.addEventListener(ev, handler, false);
  }
}

function test(e) {
  alert("e.target.tagName : " + e.target.tagName +"\n e.currentTarget.tagName : " +e.currentTarget.tagName);
}
var outer = G("outer");
var inner = G("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
</script>

上面的示例中，当在outer上点击时，e.target与e.currentTarget是一样的，都是div；当在inner上点击时，e.target是p，而e.currentTarget则是div。

addEventListener()及attachEvent()区别

大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这里就大概介绍一下Javascript的Event用法

【IE中】:

attachEvent函数语法:

target.attachEvent(type, listener);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

【非IE中】:

addEventListener函数语法:

target.addEventListener(type, listener, useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

【使用场景】

一般我们在JS中添加事件,是这样子的:

obj.onclick=method

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

obj.onclick=method1
obj.onclick=method2
obj.onclick=method3

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,
主角改登场了,在IE中我们可以使用attachEvent方法：

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

注意：使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange
以上方法的执行顺序：

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

以上方法的执行顺序：

method1->method2->method3