精华内容
下载资源
问答
  • attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写 obj.onclick=method。 相同点: 它们都是DO...

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写

    obj.οnclick=method

    相同点:

      它们都是DOM对象的方法,可以实现一种事件绑定多个事件处理函数。

    复制代码
    obj = document.getElementById("testdiv");
    obj.onclick=function(){alert('1');};
    obj.onclick=function(){alert('2');};
    obj.onclick=function(){alert('3');};
    // 当使用上边三句话进行事件绑定的时候,很明显当点击ID为testdiv对象时,只能执行
    //最后一句脚本。因为onclick作为一个事件处理对象,只能赋一个值,后面的赋值自动覆
    //盖前面的
    复制代码

    使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用

    obj = document.getElementById("testdiv");
    obj.attachEvent('onclick',function(){{alert('1');});
    obj.attachEvent('onclick',function(){{alert('2');});
    obj.attachEvent('onclick',function(){{alert('3');});//点击时,三个方法都会执行
    obj = document.getElementById("testdiv");
    obj.addEventListener('click',function(){{alert('1');},false);
    obj.addEventListener('click',function(){{alert(2');},false);
    obj.addEventListener('click',function(){{alert('3');},false);//点击时,三个方法都会执行

    不同点:

      1.attachEvent是IE9之前特有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

      2.多次绑定后执行的顺序是不一样的,attachEvent在ie9之前的版本是后绑定先执行,ie9以及以后的版本是先绑定先执行,且两者都支持,addEventListener是先绑定先执行

    obj = document.getElementById("testdiv");
    obj.attachEvent('onclick',function(){{alert('1');});
    obj.attachEvent('onclick',function(){{alert('2');});
    obj.attachEvent('onclick',function(){{alert('3');});
    //执行顺序是alert(3),alert(2),alert(1);
    obj = document.getElementById("testdiv");
    obj.addEventListener('click',function(){{alert('1');},false);
    obj.addEventListener('click',function(){{alert('2');},false);
    obj.addEventListener('click',function(){{alert('3');},false);
    //点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

      3.绑定时间时,attachEvent必须带on,如onclick,onmouseover等,而addEventListener不能带on,如click,mouseover。这个区别在以上代码中可见。

      4.attachEvent仅需要传递两个参数,而addEventListener需要传递三个参数,这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目 标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。 

    为了解决浏览器的兼容性可以封装成addEvent方法:

    复制代码
    function addEvent(elm, evType, fn, useCapture) 
    {
        if (elm.addEventListener) 
        {
            // W3C标准
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) 
        {
            //IE
            var r = elm.attachEvent(‘on‘   evType, fn);//IE5 
            return r;
        }
        else 
        {
            elm['on'   evType] = fn;//DOM事件
        }
    }
    复制代码
    复制代码
            function addEvent(element, type, handler) {
                //为每一个事件处理函数分派一个唯一的ID
                if (!handler.$$guid) handler.$$guid = addEvent.guid  ;
                //为元素的事件类型创建一个哈希表
                if (!element.events) element.events = {};
                //为每一个"元素/事件"对创建一个事件处理程序的哈希表
                var handlers = element.events[type];
                if (!handlers) {
                    handlers = element.events[type] = {};
                    //存储存在的事件处理函数(如果有)
                    if (element["on"   type]) {
                        handlers[0] = element["on"   type];
                    }
                }
                //将事件处理函数存入哈希表
                handlers[handler.$$guid] = handler;
                //指派一个全局的事件处理函数来做所有的工作
                element["on"   type] = handleEvent;
            };
            //用来创建唯一的ID的计数器
            addEvent.guid = 1;
            function removeEvent(element, type, handler) {
                //从哈希表中删除事件处理函数
                if (element.events && element.events[type]) {
                    delete element.events[type][handler.$$guid];
                }
            };
            function handleEvent(event) {
                var returnValue = true;
                //抓获事件对象(IE使用全局事件对象)
                event = event || fixEvent(window.event);
                //取得事件处理函数的哈希表的引用
                var handlers = this.events[event.type];
                //执行每一个处理函数
                for (var i in handlers) {
                    this.$$handleEvent = handlers[i];
                    if (this.$$handleEvent(event) === false) {
                        returnValue = false;
                    }
                }
                return returnValue;
            };
            //为IE的事件对象添加一些“缺失的”函数
            function fixEvent(event) {
                //添加标准的W3C方法
                event.preventDefault = fixEvent.preventDefault;
                event.stopPropagation = fixEvent.stopPropagation;
                return event;
            };
            fixEvent.preventDefault = function () {
                this.returnValue = false;
            };
            fixEvent.stopPropagation = function () {
                this.cancelBubble = true;
            };
    复制代码
    复制代码
    var addEvent = (function () {
                if (document.addEventListener) {
                    return function (el, type, fn) {
                        if (el.length) {
                            for (var i = 0; i && el.length; i  ) {
                                addEvent(el[i], type, fn);
                            }
                        } else {
                            el.addEventListener(type, fn, false);
                        }
                    };
                } else {
                    return function (el, type, fn) {
                        if (el.length) {
                            for (var i = 0; i && el.length; i  ) {
                                addEvent(el[i], type, fn);
                            }
                        } else {
                            el.attachEvent('on'   type, function () {
                                return fn.call(el, window.event);
                            });
                        }
                    };
                }
            })();
    复制代码

    以上内容是在学习了该博文后经过修改转载的https://www.cnblogs.com/dacuotecuo/p/3510823.html

    版权说明:本文版权归作者和博客园共有,欢迎转载,但必须保留此段声明,且在文章页面中给出原文连接。


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 这种方式对于 Internet Explorer、Mozilla/Firefox Opera 来说很通用。但是有一个问题就是,这种方式只能一个事件对应一个事件处理函数。如果希望一个事件可以依次执行多个处理函数就不好用了。  但 是 ...
     
    

    attachEvent 是IE中使用

    addEventListener是Dom标准

    以前写 JavaScript 脚本时,事件都是采用 object.event = handler; 的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是,这种方式只能一个事件对应一个事件处理函数。如果希望一个事件可以依次执行多个处理函数就不好用了。 

    但 是 Internet Explorer 从 5.0 开始提供了一个 attachEvent (IE中使用)方法,使用这个方法,就可以给一个事件指派多个处理函数了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener(这个是dom标准) 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener 中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。 


    因此要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用 attachEvent 还是 addEventListener 就可以了。实例如下:

     

                if (window.attachEvent) {  
                    window.attachEvent("onload", remove);  
                } else if (window.addEventListener) {  
                    window.addEventListener("load", remove, false);    
                }              
                function remove() {  
                    var div = document.getElementById("divprogressbar");  
                    document.body.removeChild(div);  
                } 

    注意:attachEvent 所指派的多个过程的执行顺序是随机的,所以这几个过程之间不要有顺序依赖。另外 attachEvent 和 addEventListener 不仅仅适用于 window 对象,其他的一些对象也支持该方法。

    举例:

    document.getElementById( " btn " ).onclick  =  method1;
    document.getElementById(
    " btn " ).onclick  =  method2;
    document.getElementById(
    " btn " ).onclick  =  method3;
    如果这样写,那么将会只有medhot3被执行

    写成这样:
    var  btn1Obj  =  document.getElementById( " btn1 " ); 
    // object.attachEvent(event,function);
    btn1Obj.attachEvent( " onclick " ,method1);
    btn1Obj.attachEvent(
    " onclick " ,method2);
    btn1Obj.attachEvent(
    " onclick " ,method3);
    执行顺序为method3->method2->method1

    如果是Mozilla系列,并不支持该方法,需要用到addEventListener
    var  btn1Obj  =  document.getElementById( " btn1 " );
    // element.addEventListener(type,listener,useCapture);
    btn1Obj.addEventListener( " click " ,method1, false );
    btn1Obj.addEventListener(
    " click " ,method2, false );
    btn1Obj.addEventListener(
    " click " ,method3, false );
    执行顺序为method1->method2->method3


    展开全文
  • attachEventaddEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
  • attachEvent和addEventListener详解,开始了! 先介绍 attachEventattachEvent方法可以动态的为网页内的元素添加一个事件.通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上onclick=事件名称.使用...

    attachEvent和addEventListener详解,开始了!

    先介绍 attachEvent:

    attachEvent方法可以动态的为网页内的元素添加一个事件.通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上οnclick=事件名称.使用attachEvent则不必这样做.你把写好的事件准备好,在需要的时候给元素绑定上再执行.而且attachEvent支持为某个元素绑定多个事件.执行顺序是,后绑定的先执行.
    那么我在什么时候使用该方法呢,当然在你需要时.不过如今的Web2.0追求的是分离式开发技术.也就是说你在网页内看不到一句JavaScript语句,却在该页中使用了大量JavaScript技术.这就是高手们所谓的分离式开发技术.让前端的显示和程序逻辑分离开来.
    如果想删除事件请使用detachEvent
    attachEvent方法只支持IE浏览器.与其功能相同的指令是addEventListener,该指令支持FF等浏览器,并且是W3C标准
    具体请参看下面实例.


    语法:Element.attachEvent(Etype,EventName)

    返回值:[tag:return_value /]
    参数Element:要为该元素动态添加一个事件.
    Etype:指定事件类型.比如:onclick,onkeyup,onmousemove等..
    EventName:指定事件名称.也就是你写好的函数.


    attachEvent实例

    <html>
    <head>
    <title>attachEvent方法使用实例</title>
    </head>
    <body>
    <input id="a" type="button" value="点我" />注意该按扭没有任何事件<br/>
    <input id="b" type="button" value="点我绑定事件" onclick="att_Event()" />点击该按扭为上面的按扭添加一个事件.
    <center><h3>重点提示:你可以尝试多次点击绑定事件,最上面的那个按扭就会绑定多个事件.比如你点击三次绑定.你再点击最上面的按扭,他就会执行三次弹出框.这就是我说的attachEvent方法支持为某个元素绑定多个事件.当然在实际开发中,你可以根据实际情况,来为他绑定多个不同的事件!
    <script language="javascript">
    function att_Event(){
    var a = document.getElementById("a");
    a.value = "点我有事件";
    a.attachEvent("onclick",Hello_ok);
    }
    
    function Hello_ok(){
    alert("您好,欢迎来到jiang_yy_jiang的技术空间!本空间的发展离不开您的支持,谢谢您光临!");
    }
    </script>
    </body>
    </html>

     

    接下来:addEventListener

    addEventListener方法与attachEvent方法功能相同.但是addEventListener是W3C标准,而attachEvent非W3C标准,且只支持IE浏览器.
    虽然addEventListener属于标准方法,但依然无法在IE下运行.IE不支持该方法.
    addEventListener带有三个参数.必须设置.缺一不可.
    addEventListener可以为网页内某个元素动态绑定一个事件.事件类型可随意指定.如:click,mousemove,keyup等.
    通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上οnclick=事件名称.使用addEventListener则不必这样做.你把写好的事件准备好,在需要的时候给元素绑定上再执行.而且addEventListener支持为某个元素绑定多个事件.执行顺序是,先绑定的先执行.
    那么我在什么时候使用该方法呢,当然在你需要时.不过如今的Web2.0追求的是分离式开发技术.也就是说你在网页内看不到一句JavaScript语句,却在该页中使用了大量JavaScript技术.这就是高手们所谓的分离式开发技术.让前端的显示和程序逻辑分离开来.
    如果想删除事件请使用removeEventListener
    经过我测试该方法支持FireFox(火狐浏览器).不支持IE,具体请参看下面实例.

    语法:Element.addEventListener(Etype,EventName,boole)返回值:[tag:return_value /]
    参数Element:要为该元素绑定一个事件.可以是任意的html元素.
    Etype:事件类型.比如:click,keyup,mousemove.注意使用addEventListener绑定事件时,设置参数事件类型时不必写on.否则会出错.
    EventName:要绑定事件的名称.也就是你写好的函数.
    boole:该参数是一个布尔值:false或true必须填写.false代表支持浏览器事件捕获功能,true代表支持浏览事件冒泡功能.
    addEventListener实例<html>

    <head>
    <title>addEventListener方法使用实例</title>
    </head>
    <body>
    <input id="a" type="button" value="点我" />注意执行网页时该按扭并没有事件<br/>
    <input id="b" type="button" value="点我绑定事件" onclick="add_Event()" />点击该按扭为上面的按扭绑定事件<br/>
    <h3>注意该实例必须在FireFox(火狐浏览器下运行).你可以根据实际情况,来为他绑定多个不同的事件!addEventListener与<a href="http://hi.baidu.com/jiang_yy_jiang">attachevent</a>不一样的是,该方法不可以把同一事件绑定多次,但支持把不同的事件绑定到一个元素.请使用非IE浏览器测试该例。</h3>

     

    <script language="javascript">
    function add_Event(){
    var a = document.getElementById("a");
    a.value="点我有事件";
    a.addEventListener("click",Hello_ok,false);
    }
    
    function Hello_ok(){
    alert("您好!欢迎来到jiang_yy_jiang的技术空间!本空间的发展离不开您的支持,谢谢您光临!");
    }
    </script>
    </body>
    </html>

     

    请注意说明哈!那个很重要,开发人员要注意细节!

    看了上面的你在想,这两个方法浏览器不兼容,咋办,当然!老办法咯!!先判断是IE还是火狐嘛,这个简单看下面代码:

    <script type="text/javascript">
            function att_Event() {
                var a = document.getElementById("a");
                a.value = "点我有事件";
                if (document.all) {//IE
                    a.attachEvent("onclick", Hello_ok);
                }
                else {//FF,Chrome,Safari
                    a.addEventListener("click", Hello_ok, false);
                }
            }
            function Hello_ok() {
                alert("您好,我测试attachEvent时间方法!");
            }
        </script>

     http://blog.163.com/wangzhengquan85@126/blog/static/36082995201011812341235/

    转载于:https://www.cnblogs.com/eason-chan/p/3659790.html

    展开全文
  • attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method。 相同点:  它们都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。 ...

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method

    相同点:

      它们都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。

    obj = document.getElementById("testdiv");
    obj.οnclick=function(){alert('1');};
    obj.οnclick=function(){alert('2');};
    obj.οnclick=function(){alert('3');};
    // 当使用上边三句话进行事件绑定的时候,很明显当点击ID为testdiv对象时,只能执行
    //最后一句脚本。因为onclick作为一个事件处理对象,只能赋一个值,后面的赋值自动覆
    //盖前面的

    使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用

    obj = document.getElementById("testdiv");
    obj.attachEvent('onclick',function(){{alert('1');});
    obj.attachEvent('onclick',function(){{alert('2');});
    obj.attachEvent('onclick',function(){{alert('3');});//点击时,三个方法都会执行
    obj = document.getElementById("testdiv");
    obj.addEventListener('click',function(){{alert('1');},false);
    obj.addEventListener('click',function(){{alert(2');},false);
    obj.addEventListener('click',function(){{alert('3');},false);//点击时,三个方法都会执行

    不同点:

      1.attachEvent是IE有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

      2.多次绑定后执行的顺序是不一样的,attachEvent是后绑定先执行,addEventListener是先绑定先执行。

    obj = document.getElementById("testdiv");
    obj.attachEvent('onclick',function(){{alert('1');});
    obj.attachEvent('onclick',function(){{alert('2');});
    obj.attachEvent('onclick',function(){{alert('3');});
    //执行顺序是alert(3),alert(2),alert(1);
    obj = document.getElementById("testdiv");
    obj.addEventListener('click',function(){{alert('1');},false);
    obj.addEventListener('click',function(){{alert('2');},false);
    obj.addEventListener('click',function(){{alert('3');},false);
    //点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

      3.绑定时间时,attachEvent必须带on,如onclick,onmouseover等,而addEventListener不能带on,如click,mouseover。这个区别在以上代码中可见。

      4.attachEvent仅需要传递两个参数,而addEventListener需要传递三个参数,这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目 标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。 

    为了解决浏览器的兼容性可以写如下代码:

    function addEvent(elm, evType, fn, useCapture) 
    {
        if (elm.addEventListener) 
        {
            // W3C标准
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) 
        {
            //IE
            var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
            return r;
        }
        else 
        {
            elm['on' + evType] = fn;//DOM事件
        }
    }
            function addEvent(element, type, handler) {
                //为每一个事件处理函数分派一个唯一的ID
                if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                //为元素的事件类型创建一个哈希表
                if (!element.events) element.events = {};
                //为每一个"元素/事件"对创建一个事件处理程序的哈希表
                var handlers = element.events[type];
                if (!handlers) {
                    handlers = element.events[type] = {};
                    //存储存在的事件处理函数(如果有)
                    if (element["on" + type]) {
                        handlers[0] = element["on" + type];
                    }
                }
                //将事件处理函数存入哈希表
                handlers[handler.$$guid] = handler;
                //指派一个全局的事件处理函数来做所有的工作
                element["on" + type] = handleEvent;
            };
            //用来创建唯一的ID的计数器
            addEvent.guid = 1;
            function removeEvent(element, type, handler) {
                //从哈希表中删除事件处理函数
                if (element.events && element.events[type]) {
                    delete element.events[type][handler.$$guid];
                }
            };
            function handleEvent(event) {
                var returnValue = true;
                //抓获事件对象(IE使用全局事件对象)
                event = event || fixEvent(window.event);
                //取得事件处理函数的哈希表的引用
                var handlers = this.events[event.type];
                //执行每一个处理函数
                for (var i in handlers) {
                    this.$$handleEvent = handlers[i];
                    if (this.$$handleEvent(event) === false) {
                        returnValue = false;
                    }
                }
                return returnValue;
            };
            //为IE的事件对象添加一些“缺失的”函数
            function fixEvent(event) {
                //添加标准的W3C方法
                event.preventDefault = fixEvent.preventDefault;
                event.stopPropagation = fixEvent.stopPropagation;
                return event;
            };
            fixEvent.preventDefault = function () {
                this.returnValue = false;
            };
            fixEvent.stopPropagation = function () {
                this.cancelBubble = true;
            };
    var addEvent = (function () {
                if (document.addEventListener) {
                    return function (el, type, fn) {
                        if (el.length) {
                            for (var i = 0; i && el.length; i++) {
                                addEvent(el[i], type, fn);
                            }
                        } else {
                            el.addEventListener(type, fn, false);
                        }
                    };
                } else {
                    return function (el, type, fn) {
                        if (el.length) {
                            for (var i = 0; i && el.length; i++) {
                                addEvent(el[i], type, fn);
                            }
                        } else {
                            el.attachEvent('on' + type, function () {
                                return fn.call(el, window.event);
                            });
                        }
                    };
                }
            })();

    转载于:https://www.cnblogs.com/Joe-and-Joan/p/10091092.html

    展开全文
  • JavaScript关于attachEvent和addEventListener的使用方法attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)addEventListener方法 用于 Mozilla系列举例:Java代码document.getElementById("btn...
  • JS:attachEvent和addEventListener 使用方法 收藏 JS:attachEvent和addEventListener 使用方法attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 ...
  • attachEvent和addEventListener的用法 if (document.all){window.attachEvent('onload',函数名)//IE中}else{window.addEventListener('load',函数名,false);//firefox} 这里贴一个例子,该例子来自互联网:...
  • javascript attachEvent和addEventListener 使用方法 attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementById("btn&...
  • JS:attachEvent和addEventListener 使用方法
  • 1.attachEvent和addEventListener  attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementById("btn").onclick =...
  • 1.attachEventaddEventListener的区别 支持的浏览器不同。attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。 参数不同。addEventListener第三个参数可以指定是否捕获,而attachEvent不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,663
精华内容 13,065
关键字:

attachevent和addeventlistener