一,关于prototype.js中发现的问题
跟我再深入啃啃prototype.js
中我们讨论了prototype.js中得 bind/Event.observe.
charon@xxx 提到了 Event.observe(myChk, 'click',showMessage.bind(this), false);

本来做drag的例子,发现prototype.js的个问题。见附件  test.htm

以下贴出了代码:
当注册 div的mousemove事件,并且div中包括个 img元素时,如果我们的注册函数用到prototype.js的bind函数,那拖动鼠标,不会按照你的预想执行函数。以为是 apply/call函数的问题。但在YUL中,注册代码和prototype.js基本类似,但代码会正确执行。郁闷了半天,发现是bind函数实现的 问题,与call,apply函数无关。见

var fun=obj.move.bind(obj); //错误,bind函数有问题呀
fun=function(){return obj.move.apply(obj)}; //正确
Event.observe("dragDiv","mousemove",fun,true
);

看来prototype.js bind函数的这层包装有问题,虽然我还不能确定问题所在,(估计是闭包引起的)。但建议大家小心了。尤其是实现拖拉功能时。
也就在mousemove时才遇到这个问题。

<script language=javascript src="prototype1.3.1.js"></script>
<script language=javascript src="yahoo.js"></script>
<script language=javascript src="event.js"></script>
<body>
<div id="dragDiv">
  
<img src="img.jpg" style="width:280px;height:200px"></img>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
if(window.attachEvent){
  
}
else{
 alert(
"为了测试,请用ie");
}
function DragListener(){
    
this.down=function(){
        
return false;
    },
    
this.move=function(){
        
var x=Event.pointerX(event);
        
var y=Event.pointerY(event);
        window.status
="x="+x+";y="+y;//仅在ie下可以运行,为了测试
        return false;
    }
}
var obj=new DragListener();
//因为我想在方法中用obj对象的内容,所以我用prototype.js的bind方法改变方法的 ”调用对象“
//
当我下压鼠标拖动时,会出现异常

/*
$("dragDiv").onmousedown =obj.down.bind(obj);
$("dragDiv").onmousemove = obj.move.bind(obj);  
*/

/*
$("dragDiv").onmousedown =obj.down;//正确 但我们在方法中用this访问到的对象是 dom
$("dragDiv").onmousemove = obj.move;//正确
*/

/*
$("dragDiv").onmousedown =associateObjWithEvent(obj,'down');//正确
$("dragDiv").onmousemove = associateObjWithEvent(obj,'move');//正确
*/

Event.observe(
"dragDiv","mousedown",obj.down.bindAsEventListener(obj),true);
/*
Function.prototype.bind = function(object) {
  var __method = this;
  return function() {
    __method.apply(object, arguments);
  }
}
*/
var fun=obj.move.bind(obj); //错误,bind函数有问题呀
fun=function(){return obj.move.apply(obj)}; //正确
Event.observe("dragDiv","mousemove",fun,true);


//YAHOO.util.Event.addListener("dragDiv", "mousedown", obj.down, obj, true);//正确
//
YAHOO.util.Event.addListener("dragDiv", "mousemove", obj.move, obj, true);//正确

function associateObjWithEvent(obj, methodName){
    
return (function(e){
        e 
= e||window.event;
        
return obj[methodName](e);
    });
}
//-->
</SCRIPT>
</body>



二,关于拖拉代码实现的建议

附件中包括我实现的拖拉代码,是失败的,我把问题想的太简单了。现在总结点经验,与大家分享。
1 关于时间注册方式
  (1)
$("dragDiv").onmousedown =obj.down;典型的传统事件注册方式,缺点一个元素一个处理函数,显然不够好
  (2)
Event.observe("dragDiv","mousemove",fun,true);
  YAHOO.util.Event.addListener("dragDiv", "mousedown", obj.down, obj, true);
  W3C事件模型,mozilla addEventListener,ie attachEvent...,在ajax in action中文版 110页,作者说了些问题。不过prototype.js,yul都解决了这个问题。
  (3)ajax in action 中提到的 自己实现的类似 swing的 事件注册机制
可能是个好的选择。
 
2 关于时间注册的元素
  附件中有我简单的例子,我以为把事件注册到要拖动的元素上不错,可以避免与其它事件的混乱,也好管理,可效果是很差的,当鼠标动作很快,或鼠标到达浏览器边界时就不好控制了。
  可见把事件注册到document是个不错的选择,可造成编程的难度是巨大的。
  如dojo-0.3.0 见 dojo.dnd.HtmlDragManager,
  yul中的dragdrop.js。注意,yul中,onmousedown是注册到被拖动元素,而move,up注册到document.
3 关于拖拉代码的重用
  关于层的拖动,实现是很简单的,但是如果要重用,我感觉是很困难的,主要问题还是事件注册上。dojo对事件的注册提供好的支持,但也够复杂的。
  dojo,yul这些层拖动对鼠标移动到浏览器之外好像没有好的控制。
  http://script.aculo.us/的实现也比较粗糙,bug多多,尤其是有滚动条时。

感觉http://www.google.com/ig?hl=zh-CN 是最好的,不考虑”重用“,自己实现自己用,javascript的类库普遍缺乏系统的测试,赶快成熟吧,期待dojo。


葡萄牙比赛开始了,以后有时间修改吧,凑合看吧。