Javascript定义回车事件(addEventListener/attachEvent)-自学php网

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

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 如果我们要定义回车事件就必须像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) }); } }

有点需要注意，对于IE，每个事件句柄eventhandler都会保留所占用的内存，所以当我们刷新页面的时候，都会有额外的内存被保留，这样会引起内存的过度占用。解决方法就是给window.onunload绑定一个detachEvent

Javascript刷新框架中的页面程序代码

JavaScript闭包使用方法详解

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论