一，关于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时才遇到这个问题。
二，关于拖拉代码实现的建议
附件中包括我实现的拖拉代码，是失败的，我把问题想的太简单了。现在总结点经验，与大家分享。
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。
葡萄牙比赛开始了，以后有时间修改吧，凑合看吧。
在 跟我再深入啃啃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 >
< 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。
葡萄牙比赛开始了，以后有时间修改吧，凑合看吧。