Question

我知道addEventListener可以添加很多处理程序，＆＃34; onxx＆＃34;只需要一个handler.and＆＃34; addEventListener＆＃34;可以删除处理程序。但是我无法理解的一件事是：为什么当我使用onxx时，我的控制台正确地获取日志。但是当我使用＆＃34; addEventListener＆＃34;我无法正确使用mousemove事件。 当我使用addEventListener时，我按下鼠标然后移动鼠标。它没有触发'#m; mousemove＆＃34;事件继续。但是当我使用＆＃34; onxx＆＃34;有用！

<html> 
    <head>
    </head>
    <body>
        <div id = "div">
            <div id = "div1">
                <img id="omna" src="http://online1.map.bdimg.com/tile/?qt=tile&x=0&y=0&z=4&styles=pl&udt=20141102" width="256px" height="256px" unselectable="on" style="position:absolute top:0px left:0px"/>
            </div>
            <div>
                <img id="omna" src="http://online1.map.bdimg.com/tile/?qt=tile&x=0&y=0&z=4&styles=pl&udt=20141102" width="256px" height="256px" unselectable="on" style="position:absolute top:0px left:256px"/>
            </div>
        </div>

        <script type="text/javascript"> 
            var eventutil = {
                addHandler : function(element, type, handler){
                    if(element){
                        if(element.addEventListener){
                            element.addEventListener(type, handler, false);
                        }else if(element.attachEvent){
                            element.attachEvent("on"+type, handler);
                        }else {
                            element["on"+type] = handler;
                        }
                    }
                },

                removeHandler : function(element, type, handler){
                    if(element){
                        if(element.removeEventListener ){
                            element.removeEventListener(type, handler, false);
                        }else if(element.detachEvent ){
                            element.detachEvent("on"+type, handler);
                        }else{
                            element["on"+type] = null;
                        }
                    }
                }
            };

            function myonmousedown (){
                console.log("mousedown");
                return false;
            };

            function myonmousemove (){
                console.log("mousemove");

            }
            window.onload = function(){
                var div = document.getElementById("div");
                eventutil.addHandler(div, "mousedown", myonmousedown);
                eventutil.addHandler(div, "mousemove", myonmousemove);
            }

        </script> 
    </body>
</html>

事件处理时“addEventListener”和“onxx”的区别

0 个答案: