Javascript定义回车事件(addEventListener/attachEvent)-百分百源码网

Javascript定义回车事件(addEventListener/attachEvent)

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

如果我们要定义回车事件就必须像jquery一样来绑定事件，在纯js下绑定事件我们使用addEventListener与attachEvent他们分别不ie与ff浏览器用法。

例我们来绑定一个回车事件

代码如下

$(function () {
            //定义回车事件
            if (document.addEventListener) {//如果是Firefox
                document.addEventListener("keypress", fireFoxHandler, true);
            }
            else {
                document.attachEvent("onkeypress", ieHandler);
            }
            function fireFoxHandler(evt) {
                if (evt.keyCode == 13) {
                    $("#btnLogin")[0].click();
                }
            }
            function ieHandler(evt) {
                if (evt.keyCode == 13) {
                    $("#btnLogin")[0].click();
                }
            }
});

下面我们来讲讲addeventlistener

语法：obj.addEventListener(‘event’,function,boolean)

参数1-event:所要绑定的事件，比如,load,click

参数2-function:要绑定的方法函数

参数3-boolean:是确定事件是作为一个向下级联(true)还是一个向上冒泡(false)的事件
这个方法不依赖于特定的事件句柄属性，这样就以为这你可以任何一个对象的任何一个事件注册做个事件处理

代码如下

obj.addeventlistener(‘event’,func,false);//我们采用冒泡的方法注册事件

obj.parentNode.addeventlistener(‘event1′,func1,false);

obj.parentNode.parentNode.addeventlistener(‘event2′,func2,false);

这样，我们就可以在obj的事件被激活的时候，激活父级节点绑定的事件，然后再激活父级节点的父级节点所绑定的事件，通过事件的冒泡来执行多个不同的事件。

可惜，ie只支持它自己的事件处理模型，这个时候，我们就需要使用attachEvent

attachEvent

方法：obj.attachEvent(“eventhandler”, function)

参数1-eventhandle:事件句柄，就是类似onclick,onblur之类的事件

参数2-function:绑定事件的方法函数

事件对象通过attachevent和通过addeventlistener是一样的，但是，attachevent的this总是指向window对象

因为题目中中fn这个变量是在DOM标准下的浏览器中才会声明，在IE下它将是一个全局变量，我们就通过apply或者call的方法来改变this指向对象的作用域

代码如下
function bind(el, type, fn, useCapture){ if (window.addEventListener) { el.addEventListener(type, function(){ fn.apply(el, arguments);//始终将this指向DOM }, useCapture); } else if (window.attachEvent) { el.attachEvent(‘on’ + type, function(){ fn.apply(el, arguments);//始终将this指向DOM，也可以用call(el,agruments) }); } }