解惑

解己之惑,解人之惑

标签:JavaScript

动态添加多个事件处理函数

一般我们都是直接设定一个事件处理函数,或者在事件处理字符串里面写一串连续调用的,但是在写一些通用的东西时就不好办了,这个时候就要动态添加多个事件处理函数了,样例代码为:
var ie = /msie/ig.test(navigator.userAgent);
if(ie) {
    element.attachEvent("onfocus", focusSubmit);
} else {
    element.addEventListener("focus", focusSubmit, false);
}

注意除了方法名不一样外,事件的名字也不一样,其它的事件类似。IE是带on的,而Mozilla系列(包括FF)是不带on的。

动态设置带参数的onclick事件

本来这个应该不是什么难事,但是我们是在一个受限的情况下写代码,我们有一个RadioSelectEntry类帮助我们生成RadioButton元素,但是又没有提供设置onclick事件的方法,只能在onload里面做,但是可能有多个,我不愿意写几个一样的方法,想根据参数动态设置,这就遇到问题了,因为一般都是这样:
element.onclick=functionName;
这里的functionName就是事件处理函数,但是我的是带参数的,怎么办?呵呵,一个小技巧就可以解决:匿名函数:
    element.onclick=function() {
        functionName(param);
    };

慎用JavaScript修改Form的元素的值

很早就收到一个Bug说修改了某个元素的值以后,点击Next提交然后使用浏览器的Back按钮返回,结果那个元素的值是提交以前的值。
这个应该是浏览器的History功能的限制,它不能记录你的Javascript代码对Form元素的值的修改。在完成向导之类的功能的时候不要使用自定义的表单元素,或者不要用JavaScript去修改其它的需要提交的元素的值,这些修改都不会被浏览器的History功能记录。当用户点击浏览器的后退时,他可能看到不是他期望的结果。
一般要解决这个问题,要么禁用浏览器的后退功能(很多MIS系统可能都是这么干的),自己另外提供一个后退功能重新从后台取数据并刷新页面。
要么使用Cookie记录那些操作并在页面的onload事件里面从Cookie提取那些记录。
无论是那种方法都不是很方便。

不知道有没有完美的解决方案。另外这个问题对IE和FF都是有效的。

推荐一个显示Tooltip的JavaScript库:overLIB

其实这个本来是我为了修正公司产品中的Tooltip实现想使用的东西,可惜架构师不太同意这样做,因为原来的产品中已经有相关的实现,引入第三方的东西不太好。
这个东西的功能很强大,我在一个兼职的项目中使用过,效果非常不错。
除了强大外,浏览器兼容也是没有问题的,如果你的页面上需要显示提示信息,这个是一个不错的选择。
产品的主页:http://www.bosrup.com/web/overlib/

定制Blog It

看到别人用了一个比较强大的添加书签的插件:Blog It,但是上面的说明比较简单:

1.修改 {WP_HOME}/wp-content/themes/{YOUR_THEME} 目录下的 single.php 文件,将

<div class="post">

修改为

<div class="post" id="postitem">

但是实际上很多人使用不同的主题的时候single.php里面的内容完全不同,根本就没有一个class是post的div,其实
Blog It的原理比较简单,就是查找页面上ID为postitem的元素,然后附加一个DIV,把里面的内容设置一下就行了:
                var postitem = document.getElementById(‘postitem’);
                var NewNode = document.createElement(‘div’);
                postitem.appendChild(NewNode);
                NewNode.innerHTML = str;

其实定制很简单,需要一点JavaScript的知识,自己随便选择一个元素,把他的ID设置为postitem或者任何其它你想使用的值,然后修改postid.php里面的代码就行了,我的这个主题修改为了:
                var postitem = document.getElementById(‘postitem’);
                var dlNode = document.createElement(‘dl’);
                var dtNode = document.createElement(‘dt’);
                var ddNode = document.createElement(‘dd’);
                dlNode.appendChild(dtNode);
                dlNode.appendChild(ddNode);
                postitem.appendChild(dlNode);
                dtNode.innerHTML = ‘&#32593;&#25688;&#65306;’;
                ddNode.innerHTML = str;
另外我把那些网摘的文字的颜色效果都去掉了,不然影响美观,呵呵。

宽度可以调整的Frame和Table

这个是我们的产品中宽度可以调整的Frame和Table的原型代码,可以给大家参考下。关键点就是对鼠标事件的处理,这个方案有个不太好的地方就是修改的是document的鼠标事件,如果以后有更多的类似特性要支持,代码要修改的地方比较多,以后有时间再考虑有没有更好的方案,有经验的请告知。

宽度可以调整的Frame和Table原型

推荐一个AJAX相关的JS库:setInnerHTML

>跨浏览器的设置innerHTML方法

这个JS库是无意中发现的,而且刚好我们的产品要引入AJAX,但是我们又不能使用纯粹的AJAX方案,因为我们的产品已经开发了很长时间了,服务器端返回的是HTML,要专门为引入的AJAX返回特殊的内容工作量比较大,但是由于返回的HTML比较复杂,还可能包含了JS文件的引用以及JS代码,所以在IE下或者FF下总是有这样那样的问题,这个JS库的引入很好的解决了我们面临的问题,推荐在已有B/S产品或者项目中引入AJAX特性的项目使用这个解决方案。

JavaScript中的HashMap

JavaScript是没有HashMap的标准实现的,但是我们可以使用Object的特性完成HashMap的功能,例如:

  var divRequestMap = new Object();
  function ajax_loaddiv_get(url,divId)                                                            
  {
    if(divRequestMap[divId] != null)
    {
          abortRequest(divRequestMap[divId]);
    }
    var req = createrequest();
    divRequestMap[divId]=req;
    …
  }

从上面的代码我们看到可以直接将字符串做为数组下标使用,这个和HashMap中使用字符串做为关键字存取内容是类似的,但是不足的是没有HashMap的对于主键和值集合进行遍历的方法。
如果要一个功能全面的HashMap也很简单,网上有很多标准实现
推荐一个简单的实现,也可以直接下载封装好的JS文件

在其它的地方覆盖元素已经有的事件处理

在某些情况下我们可能需要修改某个表单元素的事件处理机制,但是原有的代码可能不能修改,那么我们可以在原有的代码的后面增加新的代码并覆盖以前的事件处理代码:
<script language="JavaScript" for="elementID" event="eventName">
 …
</script>
 
 这段代码应该位于整个文件的末尾,这样才能比较好的保证可以覆盖已有的事件处理,当然使用这个也可以添加事件处理。
这样的坏处是事件处理和对象分离,如果是别人维护你的代码,他可能会不知道你的事件处理代码到底是怎么加的。不过这个技巧对于开发的灵活性是有很大帮助的,而且可以以一种plugin的方式动态的增加事件处理,而不用在原有的生成elements的地方加判断,可以加在其它的不影响代码阅读的地方。

给body添加事件处理

今天发现可以给body或者其它的element添加事件处理器而原来的可以保留,但是ie和netscape的不兼容,就自己写了一个兼容两种方式的:
 function attachWindowEventHandler(event,func)
  {
    if(navigator.appName == ‘Netscape’)
    {
          window.addEventListener(event,func,false);
   }
   else
   {
         window.attachEvent(‘on’+event,func);
   }
 }
 不知道有没有可以兼容IE和Netscape的javascript?不过现在Netscape的使用范围太小了,可能性不大。

© 2019 解惑

本主题由Anders Noren提供向上 ↑