addEventListener 方法绑定回车键-百分百源码网

addEventListener 方法绑定回车键

发布时间：01/15 来源：浏览：关键词：

addEventListener是一个侦听事件并处理相应的函数,在开发应用中我们现在用得少了，因为jq都有更简单的引用方法了，不过原生开发addEventListener用到比较多哦，我们来了解一下addEventListener用法。

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序，在以前我们一般是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName，而在 DOM 中，我们用 addEventListener（IE 中用 attachEvent）。

语法

target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false。

例子

onkeydown绑定的回车会被之后的绑定覆盖.

代码如下

if(document.addEventListener){
            document.addEventListener("keypress",fireFoxHandler, true);
    } else{
            document.attachEvent("onkeypress",ieHandler);
    }
    //firefox回车
    function fireFoxHandler(evt){
        if(evt.keyCode==13) {
            alert('enter donw')
        }
    }
    //IE回车
    function ieHandler(evt){
        if(evt.keyCode==13) {
            alert('enter donw')
        }
    }

深入了解addEventListener第三个参

addEventListener中的第三个参数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。

代码如下

eg1：

document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);

document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, false);

点击id2的div结果是: id2， id1

document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true);

结果是: id2, id1

document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, true);
document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, false);

结果是：id1，id2

document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, true);

document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true);

结果是：id1，id2

addEventListener－事件流

说到 addEventListener 不得不说到事件流，先说事件流对后面的解释比较方便。

当一个事件发生时，分为三个阶段：

捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）

目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。

冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

举例