I know addEventListener can add a lot of handlers, "onxx" just have one handler, and addEventListener can remove the handler, but one thing I can't understand is: why when I use onxx, my console get log correctly, but when I use addEventListener I can't get mousemove event proper.
When I use addEventListener, I press my mouse down then I move the mouse. It doesn't trigger the mousemove event continually, but when I use "onxx" It works!
<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>