BlogJava-心情小站-随笔分类-ajax相关http://www.blogjava.net/RongHao/category/20774.html勤学、勤思zh-cnSun, 02 Mar 2008 08:44:07 GMTSun, 02 Mar 2008 08:44:07 GMT60理解DOM事件流http://www.blogjava.net/RongHao/archive/2008/03/02/183259.htmlronghaoronghaoSun, 02 Mar 2008 06:54:00 GMThttp://www.blogjava.net/RongHao/archive/2008/03/02/183259.htmlhttp://www.blogjava.net/RongHao/comments/183259.htmlhttp://www.blogjava.net/RongHao/archive/2008/03/02/183259.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/183259.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/183259.html DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。下面用个例子分别来测试这两种事件流。

1、冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

测试的HTML文件，其中用到了mootools-release-1.11.js，对mootools的代码进行了改动：
addListener: function(type, fn,setCapture){
            if (this.addEventListener) this.addEventListener(type, fn, setCapture);
            else {
                this.attachEvent('on' + type, fn);
                if (setCapture) this.setCapture(true);
            }
            return this;
        }
     
给addListener方法里增加了setCapture参数，用于测试捕获事件流。
<body>
<div  id="dd1-ct" style="width:400px;height:400px;border:1px solid #999;padding:2px">Container
    <div id="dd1-item1" style="width:200px;height:200px;border:1px solid #999;padding:2px">Item1
        <div  id="dd1-item2" style="width:100px;height:100px;border:1px solid #999;padding:2px">Item2</div>
    </div>  
</div>
<div id='rh'></div>
</body>

效果：

js:
fn1=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Item1 clicked!******';
};

fn2=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Item2 clicked!-------';
};

fn=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Container clicked!&&&&&&&&';
};
   
$('dd1-item2').addListener('click', fn2.bindWithEvent(),false);       
$('dd1-item1').addListener('click', fn1.bindWithEvent(),false);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);


测试结果ie和ff下效果一致：单击item2,会依次触发fn2、fn1、fn;单击item1,会依次触发fn1、fn;单击Container,只会触发fn;当在任何一个事件处理器里调用e.stopPropagation();都会阻止事件的冒泡。

2、捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

这里ie与ff存在着很大的差异，甚至ie6与ie7的表现也各不相同，所以分开测试。

a、ff
事件从从DOM层次的根开始往下传递时，会被useCapture属性为true的事件监听器所捕获，而到达目标元素再从目标元素冒泡时，则会被useCapture属性为false的事件监听器所捕获。当在任何一个事件处理器里调用e.stopPropagation();都会阻止事件的传播。

b、ie6
用事实说话：

第一种情况：
$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);       
$('dd1-item1').addListener('click', fn1.bindWithEvent(),true);
$('dd1-ct').addListener('click', fn.bindWithEvent(),true);

单击浏览器的任何位置，都只是触发fn；

第二种情况：
$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);       
$('dd1-item1').addListener('click', fn1.bindWithEvent(),true);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);

单击浏览器的任何位置，会依次触发fn1、fn;

第三种情况：
$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);       
$('dd1-item1').addListener('click', fn1.bindWithEvent(),false);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);

单击浏览器的任何位置，会依次触发fn2、fn1、fn;

结论：如果HTML元素捕获了通过该元素的setCapture()方法对这个元素的设置，依附于该元素的处理器将会被事件触发，即使setCapture()方法
被调用的这个元素不在目标元素的祖先路径中。事实上你甚至单击浏览器的非页面部分都会触发事件处理器。并且事件一旦被捕获就不会继续再
往下传播（即使该元素在目标元素的祖先路径中），而是立刻冒泡。e.stopPropagation();会阻止事件的冒泡。
 
c、ie7
测试效果与冒泡事件流一致。将对捕获事件流的支持干掉了？
 
结论：正如mootools所做的，避免捕获事件流。




ronghao 2008-03-02 14:54 发表评论
]]>js的流程设计器，我们需要什么http://www.blogjava.net/RongHao/archive/2008/02/13/179837.htmlronghaoronghaoWed, 13 Feb 2008 14:08:00 GMThttp://www.blogjava.net/RongHao/archive/2008/02/13/179837.htmlhttp://www.blogjava.net/RongHao/comments/179837.htmlhttp://www.blogjava.net/RongHao/archive/2008/02/13/179837.html#Feedback3http://www.blogjava.net/RongHao/comments/commentRss/179837.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/179837.html
大概的概念：

1、容器
 是的，需要容器。容器的两个目的：布局和管理组件。组件之间的相互通信以及影响都需要容器来协调。管理组件之间的状态，组件需要向容器进行注册。对组件传播过来的事件，容器需要做出处理，调用相关其他组件的方法或者忽略或者继续向上一级容器传播。

2、组件
 组件的目的是完全屏蔽对dom编程的依赖，同时屏蔽底层的浏览器事件，例如鼠标单击、双击等等，对这些事件进行完全的封装。组件有着自己的生命周期：初始化、渲染、重画、销毁等等。由组件完成页面的渲染工作，例如节点、画板、连线等等。

3、模型
 在页面进行建模是必要的，例如活动节点、流程等等，这些模型与组件衔接，它们之间的状态互相影响，比如节点组件名称的改变实际影响的是所对于节点模型的属性。画板节点的增加实际也会给响应的流程定义模型新增一个活动节点。

4、与服务器交互
 与服务器的交互完全基于xml。流程定义模型有着自己的xml方法，由xml解析为模型，由模型解析为xml，双向的过程。本地存储。很自然的选择。
 
可能的难点：
最大的难点就是组件的实现，事件的处理以及传播机制。

开发的过程：

1、底层库的选择
 面向对象的开发方式，底层库需要完成的工作：继承、接口实现、事件的统一处理接口、element DOM编程的封装。

2、基本组件的开发
 画板、图形组件、连线组件、弹出面板、简单表格组件、树等等。封装基本的事件。可以定制事件。

3、容器的开发，管理组件
 组件实际也是容器的实现，比如画板的概念。画板中节点之间的互相影响。

4、加入模型的支持

5、xml与模型之间的js解析

参考：
ext是一个不错的参考，但是太笨重，功能越多越缓慢，轻量实现。主要参考其中容器以及组件的概念。
draw2d 实现太简单，基本就是一个图形库，考虑其中对图形组件的实现。


ronghao 2008-02-13 22:08 发表评论
]]>《Enterprise AJAX——高性能Web应用的构建策略》目录http://www.blogjava.net/RongHao/archive/2008/01/24/177557.htmlronghaoronghaoThu, 24 Jan 2008 10:21:00 GMThttp://www.blogjava.net/RongHao/archive/2008/01/24/177557.htmlhttp://www.blogjava.net/RongHao/comments/177557.htmlhttp://www.blogjava.net/RongHao/archive/2008/01/24/177557.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/177557.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/177557.html内容
序
致谢
关于作者

第1章 AJAX和富互联网应用

    转变中的Web
       传统Web应用的痛处
       AJAX止痛药
    企业中的AJAX
    采用AJAX的驱动因素
       可用性
       网络利用率
       以数据为中心
       递增的技巧、工具和技术升级
       服务器不可知论
    关于应用
       AJAX技术
       编程模式
    AJAX的替换技术
       XUL
       XAML
       Java Applets 和Web Start
       Adobe Flash，Flex和Apollo
       OpenLaszlo
    小结
    资源

第2章 AJAX组成技术(AJAX Building block)

    JavaScript
       JavaScript类型
       闭包
       面向对象的JavaScript
       Prototype属性
       面向对象编程(OOP)和继承(Inheritance)
       易变性(Mutability)
       线程(Threading)
       错误处理(Error Handling)
       命名空间(Namespacing)
    文档对象模型(Document Object Model)
       基本原理
       操作DOM
    层叠样式表
       继承和层叠(Inheritance and the Cascade)
       内联样式
       样式表
       动态样式
    事件
       事件流
       事件绑定
       跨浏览器事件
       事件对象
    客户端通信(Client-Side Messageing)
       XMLHttpRequest基础
       处理数据
    小结
    资源

第3章 Web浏览器中的AJAX

        增量的AJAX
        对服务器影响
    HTML标准
       文档类型定义(Document Type Definitions)
       盒子模型
    启动加载AJAX组件
       onload事件
       浏览器编码技巧
    模型-视图-控制器
       视图
       控制器
       模型
    AJAX MVC
       AJAX模型
       AJAX视图
       AJAX控制器
       面向方面的JavaScript
    小结
    资源

第4章 AJAX组件

    命令式组件
    声明式组件
       服务器端声明式编程
       声明式Google地图
       替代方法

    自定义声明式组件
       行为式组件
       声明式组件
       关于声明
    构建组件
       基本功能
       连接到服务器
       最终版本
    小结
    资源

第5章 从设计到部署

    设计
        为AJAX建模
        应用模型-视图-控制器模式
        优先考虑性能问题
    设计原型
       线框绘制
       验证设计决议
    测试
       测试驱动开发
       调试
    部署
       JavaScript压缩
       图片合并
       保护知识产权
       文档
    小结
    资源

第6章 AJAX架构

    多层架构：从单层到多层
    异步消息
    轮询
    服务器推送
       Comet
    跟踪请求
    缓存：处理数据
    基本缓存
    在组件中缓存
    在浏览器中缓存
    在服务器中缓存
    在数据库中缓存
       MySQL
       MS SQL Server
       Oracle
    更新服务器端模型：并发
       悲观锁定
       只读锁定
       乐观锁定
       冲突鉴定
       冲突解决
       自动化的冲突解决
    流量控制(Throttling)
       客户端
       服务端
    可伸缩性
       负载平衡和群集
       AJAX可伸缩性问题
    离线AJAX
    Firefox离线存储
    Internet Explorer userData离线存储
    使用Flash客户端存储
    离线AJAX和并发
    小结
    资源

第7章 Web服务和安全性

    Web服务
    Web服务协议
       表象状态传输
       XML远程过程调用
       Web服务
       选择合适的工具
    客户端的SOAP
       IBM Web服务JavaScript库
       Firefox
       Internet Explorer
    跨域Web服务
       服务器代理
       URL片段标识符
       Flash跨域XML
       脚本注入
    安全性
    AJAX的安全性考虑
    跨域漏洞
       跨站脚本
       跨站伪造请求
       JavaScipt劫持
   SQL注入
       预处理语句
       存储过程
       XPath注入
    数据加密和隐私
    防火墙
    小结
    资源

第8章 AJAX可用性


    常见问题
       后退按钮和书签
       页面大小
       自动提交
    可访问性
       识别用户的可访问性需求
       JavaScript和Web可访问性
       屏幕阅读器和可访问性
       兼容JAWS的AJAX交互
       键盘可访问性
    可用性测试
    迅速而又随性的测试
       招募参与者
       设计和运行测试
    软件断言测试
       用于测试可用性的工具
       对软件辅助测试的一般忠告
    小结
    资源

第9章 用户界面模式

    显示模式
       动画模式
    交互模式
       基本交互模式
    小结
    资源
       拖拽资源
       进度栏资源
       活动指示器资源
       颜色淡出资源
       即时编辑资源
       向下钻取资源
       即时搜索资源
       即时表单资源

第10章 风险和最佳实践

      
       风险来源
          技术风险
          文化和政治风险
          市场风险
       技术风险
          范围
          浏览器能力
          可维护性
          向前兼容
          第三工具支持和代码过时
       文化和政治风险
          终端用户的期待
          可培训性
          合法性
       市场风险
          搜索引擎的可访问性
          范围
          货币化
       风险评估和最佳实践
          采用特定的AJAX框架或者组件
          渐进增强和不唐突的JavaScript
          Google 网站地图
          可视化的提示
          避免镀金式设计
          采用一种收益模型
          把培训作为应用的一部分
       小结
       资源
          搜索引擎优化
          统计
          网站地图
          屏幕截取工具


第11章 案例研究

    基于Web2.0 重新武装美国国防部
       背景
       挑战
       解决方案
       采用技术
       成果
    Agrium公司整合AJAX技术到业务
       背景
       挑战
       解决方案
       采用技术
       成果
    AJAX助力国际运输和物流公司
       背景
       挑战
       解决方案
       采用技术
       成果
    小结
    资源

附录A OpenAjax Hub

    主要特性：发布/注册管理器
       范例
       未来对OpernAjax Hub支持的工具包

索引



ronghao 2008-01-24 18:21 发表评论
]]>简析EXT的事件http://www.blogjava.net/RongHao/archive/2008/01/17/175955.htmlronghaoronghaoThu, 17 Jan 2008 07:17:00 GMThttp://www.blogjava.net/RongHao/archive/2008/01/17/175955.htmlhttp://www.blogjava.net/RongHao/comments/175955.htmlhttp://www.blogjava.net/RongHao/archive/2008/01/17/175955.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/175955.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/175955.html
自定义事件
按字面意思就是用户自己定义的事件，这个事件通常与组件相关。并且需要用户根据组件的状态自己触发。相关的类Ext.util.Observable 、Ext.util.Event（Observable.js）。Ext.util.Observable是所有组件（component）的父类，它使得所有的组件都可以任意的添加自定义事件，它的events属性对事件进行维护，这些事件实际都是Ext.util.Event对象，Ext.util.Event对象里的listeners属性对与该事件相关的处理器进行维护。Observable给所有的子类提供了一个统一的接口来发布事件以及管理事件，这一特性对于组件来说是至关重要的。

浏览器事件
即传统意义上的鼠标单击、移动等等事件，这些事件是由浏览器根据用户的动作自己触发的，与页面元素紧密关联。相关的类Ext.Element 、Ext.EventManager、Ext.EventObject、Ext.lib.Event 。Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口，内置了常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等。对事件的处理，Element实际将这一处理委托给了EventManager，由EventManager对页面所有的浏览器事件进行管理，例如增加事件处理器、移除事件处理器等等，另外EventManager还定义了几个很重要的方法：onDocumentReady、onWindowResize、onTextResize。其中onDocumentReady尤为重要，通常在页面需要通过它来启动我们的AJAX程序，它会在页面document渲染完毕而图片等还未下载时调用我们的启动函数。至于EventObject，它则是对原始的浏览器事件进行了封装，提供给事件处理器一个统一一致的事件接口。Ext.lib.Event呢？EventManager的很多功能其实是调用它完成的，它的listeners、unloadListeners维护着所有的事件处理器。

ronghao 2008-01-17 15:17 发表评论
]]>OPENAJAX HUB介绍http://www.blogjava.net/RongHao/archive/2008/01/01/171978.htmlronghaoronghaoTue, 01 Jan 2008 04:57:00 GMThttp://www.blogjava.net/RongHao/archive/2008/01/01/171978.htmlhttp://www.blogjava.net/RongHao/comments/171978.htmlhttp://www.blogjava.net/RongHao/archive/2008/01/01/171978.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/171978.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/171978.html

OpenAjax Hub（“Hub”）主要用来处理Web应用开发者需要在同一个应用中同时使用多个AJAX运行库的情况。它提供标准的JavaScript，当被包含在AJAX驱动的Web应用里时，它使得多个AJAX工具包能够在同一个页面里一起协同工作。

AJAX应用开发者在开发中的需求往往存在着巨大的差异，这导致了如今市场上存在超过200个各种各样的AJAX产品，同时这些产品的架构和特性也存在巨大的差异。对一些开发者来说，他们认为开发中最重要的因素是找到一个能提供与后端服务器强大集成能力的AJAX工具包。

而对其他一些开发者来说，最重要的因素则是能否应用特殊的客户端组件（例如，富数据网格组件或交互式的图表组件）。结果，AJAX生态系统发展到现在，开发者在大部分时间里都能找到满足他们每个特殊需求的AJAX工具包，但是也存在问题，他们往往必须在同一个Web应用里混合和匹配使用多个AJAX工具包才能满足所有的需求。 

Hub应用的一个重要场合是门户和内容糅合，这里，应用开发者创建一个页面，页面里松散组装预先包装好的应用组件。Hub实际上是保证这些AJAX驱动的应用组件能够使用多个不同的AJAX工具包创建。

主要特性：Hub 的发布/订阅管理器

Hub的主要特性是它的发布/订阅管理器（“pub/sub管理器”）。 pub/sub管理器允许内容糅合的一个部分能够传播其他应用组件所订阅的事件。例如，假设存在一个日历组件，该组件允许用户能够选取一个特定的日期。内容糅合里可能存在多个UI组件，这些组件都需要根据新选择的日历日期而更新它们的视觉外观。在这种情况下，日历组件将发布一个“新日历日期”的事件，而其他可视化组件将订阅这个事件。因此，pub/sub管理器的通用消息的优点是给由不同AJAX工具包所构建的组件之间提供了一个关键的集成机制。

Hub的pub/sub管理器提供各种各样的先进特性，例如对事件名称通配符的强大支持，在下面的例子里并没有展示这个特性。

范例

让我们假设现在有这样一个商务智能应用，该应用使用下面的AJAX运行库：

■ UTILS.js, 对浏览器的JavaScript环境提供非常有用的扩展，例如XMLHttpRequest的APIs。

■ CALENDAR.js,提供一个日历组件

■ CHARTS.js, 提供一个图表组件

■     DATAGRID.js,提供一个交互式的数据网格组件

该应用有一个唯一的日历组件，用户可以以图表组件的形式（例如，每日情形、每周情形、每月情形和每年情形的柱状图）和数据网格组件的形式（例如，地方数据与全国数据，两种数据都以用户选择的感兴趣的列展示）选择其中的一些数据视图当一个新的日期在日历组件里被选择时，各个用户指定的可视化组件（例如，图表和/或数据网格组件）都需要被更新。

实现该应用的一个方法是在加载其他AJAX库之前加载OpenAjax Hub的JavaScript。例如：

<html>

<head>



<script type=”text/javascript” src=”OpenAjax.js”/>

<script type=”text/javascript” src=”UTILS.js”/>

<script type=”text/javascript” src=”CALENDAR.js”/>

<script type=”text/javascript” src=”CHARTS.js”/>

<script type=”text/javascript” src=”DATAGRID.js”/>



</head>


 

一些AJAX运行库包含OpenAjax Hub，将Hub作为它们标准发布的一部分，在这种情况下，只要特定的AJAX运行期的JavaScript（译注：这里特定的JavaScript指的就是包含OpenAjax Hub的AJAX运行库的代码）在其他兼容OpenAjax的运行库之前被加载，那么则没有必要为OpenAjax.js使用一个单独的<script>元素。

要使应用工作，开发者需要注册一个回调函数，当用户在日历组件里选择一个新的日期时调用该函数。这个回调函数接着使用OpenAjax Hub的publish()函数传播这个新日期事件：

<script type=”text/javascript”>



function MyCalendarCallback() {

OpenAjax.hub.publish(“myapp.newdate”, newdate);

}



</script>
 

接着开发者需要开发这样一些代码：所有的图表组件和数据网格组件都要订阅这个新日期事件，并要提供一个回调函数。各个回调函数将相应地更新特定的可视化组件：


<script type=”text/javascript”>



function NewDateCallback(eventname, publisherData,

subscriberData) {

更新特定的可视化组件

}

OpenAjax.hub.subscribe(“myapp.newdate”, NewDateCallback);



</script>

未来支持OpenAjax Hub的工具包

OpenAjax联盟正与工业界一起合作，达到对OpenAjax Hub的广泛支持。一个特殊的AJAX工具包可以像下面这样支持OpenAjax Hub：

■ AJAX工具包可以包含Hub（最好的方式）。Hub可以被小于3K的JavaScript实现，所以一些AJAX工具包简单地捆绑Hub，将它作为它们工具包的一个标准组件。

■ 如果Hub在运行环境里可用则使用它。其他一些AJAX工具包可能决定在它们的发布中并不包含Hub，它们会检查Hub是否早先已经被加载了，如果已经加载，它们则直接使用Hub的服务。 

■第三方的开发者可以开发适配器。对大多数工具包来说，它们可能允许第三方的开发者编写少量的JavaScript使得自己能够支持Hub。

当AJAX工具包包含内置对Hub的支持时，应用开发者的工作将更加容易，但是通过查找或编写适配器的方式，Hub依然可以被那些并未实现支持Hub的工具包所使用。





ronghao 2008-01-01 12:57 发表评论
]]>自己firefox下js程序向ie兼容遇到的几个问题(2)http://www.blogjava.net/RongHao/archive/2007/02/28/101228.htmlronghaoronghaoWed, 28 Feb 2007 13:53:00 GMThttp://www.blogjava.net/RongHao/archive/2007/02/28/101228.htmlhttp://www.blogjava.net/RongHao/comments/101228.htmlhttp://www.blogjava.net/RongHao/archive/2007/02/28/101228.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/101228.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/101228.html
var url = 'http://localhost:8080/app/get_data';
        var pars = '';
        
        var myAjax = new Ajax.Request(
            url, 
            {
                method: 'get', 
                parameters: pars, 
                onComplete: showResponse
            });
很简单的一段程序，在firefox里始终不能工作，但在ie下一切正常。打开debugger,跟踪调试到这一行
this.transport.open(this.options.method, this.url, 
        this.options.asynchronous);

在这一行执行出现问题，干掉prototype,自己写XMLHttpRequest，问题同样出现在同一个地方
req.open("GET", url, true);
ie下正常。于是开始怀疑是firefox自己的问题，firefox可能更多的从安全方面做了考虑，拒绝http://localhost:8080这种带域名的访问方式。把js程序移到应用程序里，url改为
var url = '/app/get_data';
问题解决，访问正常。
2.点击日历单元格需要弹出一个窗口用于新增工作安排，在firfox里为了方便这样拼写
var TR=document.createElement("tr");
TR.innnerHTML="<td><input ></td>";
firfox下正常，ie显示不出，改为下面方式则问题解决
var TR=document.createElement("tr");
var TD=document.createElement("td");
TD.innnerHTML="<input >";
TR.appendChild(TD);



ronghao 2007-02-28 21:53 发表评论
]]>自己firefox下js程序向ie兼容遇到的几个问题http://www.blogjava.net/RongHao/archive/2007/02/13/99744.htmlronghaoronghaoTue, 13 Feb 2007 11:07:00 GMThttp://www.blogjava.net/RongHao/archive/2007/02/13/99744.htmlhttp://www.blogjava.net/RongHao/comments/99744.htmlhttp://www.blogjava.net/RongHao/archive/2007/02/13/99744.html#Feedback0http://www.blogjava.net/RongHao/comments/commentRss/99744.htmlhttp://www.blogjava.net/RongHao/services/trackbacks/99744.html1.程序中用到prototype.js，对于事件监听，我一直这样处理
Event.observe(job.jobDiv.timeDiv, "mousedown", eway.TimeTableDiv.selectMoveJobDiv);
在firefox下完全正常，但在ie下就找不到视图所附加的对象了，改回来
job.jobDiv.timeDiv.onmousedown= eway.TimeTableDiv.selectMoveJobDiv
这样两个浏览器都可以跑。附一个简单的测试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>    
<title></title>
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script>
window.onload=function(){
  var b=new Button("wokao",$('simple'));
  }  
function Button(value,domEl){
  this.domEl=domEl;
  this.value=value;
  this.domEl.buttonObj=this;
//  this.domEl.onclick=this.clickHandler;
  Event.observe(this.domEl, "mousedown", this.clickHandler);
}

Button.prototype.clickHandler=function(){
  var buttonObj=this.buttonObj;
  var value=(buttonObj && buttonObj.value) ?
    buttonObj.value : "unknown value";
  alert(value);
}
</script>
<div class="resizeMe" id="simple">
    <p>This is just a clean DIV</p>
</div>
</body>
</html>
2.处理td的跨行和跨列，都必须这样写
td.setAttribute("rowSpan",2);
td.setAttribute("colSpan",2);
注意rowSpan，colSpan中间字母都是大写的，而写成rowspan,colspan在firefox下是没有任何问题的。
3.在拖拽层的时候会出现鼠标经过的文字被选中的现象，解决这个问题非常简单，当你开始拖拽前即你用鼠标点中你想要拖拽的层，这时候对事件进行处理
e=e||window.event;
if(e.stopProgation){
e.stopPropagation();
}
else{
e.cancelBubble = true;
}
if(e.preventDefault){
e.preventDefault();
}
else{
e.returnValue = false;
} 

如果使用prototype.js，可以简单为一行代码
Event.stop(e);



ronghao 2007-02-13 19:07 发表评论
]]>