Javascript元素添加事件分析

元素添加事件是最简单和向后兼容性最好的Javascript事件添加方法,例如:

<input type="text" value="Happy everyday!" onclick="alert(this.value)" />

这时鼠标点击文本字段,则会弹出该文本字段属性value的值"Happy everyday!"。

往往事件处理不仅有 alert(this.value) ,会包含很多行代码,所以通常会把代码写入事件处理函数中,用onclick属性调用处理函数。

Read More »

Posted in Javascript/Ajax | Tagged | Leave a comment

浅析instanceof与constructor

先上一张原型链示意图及三段对理解instanceof与constructor机制有帮助的代码:

原型链图示

how-prototypes-work

对理解有帮助的代码段

下面的代码是new一个新对象的过程

/* new 一个新对象的内部机制 */

function A(){}
var a = {};
a = {__proto__:A.prototype};
A.call(obj);

下面的代码用来证明以上的结论

function A() {}
var a = new A();
alert(a.__proto__ === A.prototype); //true

下面代码证明变量名只是对对象的引用

var b = {
  value:1
}

var a = b;

var b = {
  value:2
}

alert(a.value) //1

Read More »

Posted in Javascript/Ajax | Tagged , | 2 Comments

模拟iphone

模拟iphone

Read More »

Posted in Project | Tagged | 3 Comments

Javascript:String concatenation

用YUI Profiler做一个字符串连接效率的测试

测试目的:

发现不同的文章描述javascript字符串连接的方式均不同,预借此次测试得出最优的写字符串连接的方案。

Read More »

Posted in Javascript/Ajax | Tagged , | Leave a comment

Javascript事件整理

1 停止事件传播

function stopEvent(e) {
  var e = e || window.event;
  if(e.stopPropagation) {
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
  }
}

Read More »

Posted in Javascript/Ajax | Tagged | Leave a comment

封装window.onload

function addLoadEvent(func) {
  var oldOnload = window.onload;
  if(typeof func != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldOnload();
      func();
    }
  }
}

如果在开发过程中,需要给onload绑定一些函数,而又不确定onload事件是否已经绑定过函数addLoadEvent的优势就体现出来了

举个例子吧:

window.onload = fun1;
window.onload = fun2;
window.onload = fun3;

这时只有fun3有效,因为第一次和第二次的绑定已经被覆盖了,如果用你的addLoadEvent函数绑定的话,则fun1,fun2,fun3都会依次执行。

Posted in Javascript/Ajax | Tagged , | Leave a comment

uspace项目首页

uspace首页

Demo

Posted in Project | Leave a comment

Javascript:解析隐式声明局部变量

当页面中进行隐式声明时,JavaScript引擎会先在当前上下文中寻找是否之前有声明此变量,如果没有,再到上一级的上下文中去寻找,如果一直未找到,会最后在window上声明这个变量!

var x = "window.x"; 

function a() { 
  var x = "a's x"; 
    var b = function() { 
      var c = function() { 
        //no var! 
        x = "c's x:"; 
      }; 
      alert("before c run,the b.x:" + x);   //
      c(); 
      alert("after c run, the b.x:" + x); 
    }; 
  alert("a.x is:" + x); 
  b(); 
  alert("after b function runed, the a.x is:" + x); 
}; 

alert("before a run, window.x:" + x); 
a(); 
alert("after a run, window.x:" + x); 

这里面有以下几层:window, func a, func b, func c一直作层级嵌套。window->a->b->c
window和a中,都有定义变量x,b中未定义该变量,由于在c中隐式声明了一个x,该x最终修改了a变量的值。

Posted in Javascript/Ajax | Tagged , | Leave a comment

回车键提交与不提交表单的解决方法

结论:

回车键提交表单:设置 <input /> 标签或者 <button> 标签的属性 type="submit" 即可。

回车键不提交表单,用JavaScript来解决,具体代码如下:

document.getElementsByTagName('form')[0].onkeydown = function(e){
  var e = e || event;
  var keyNum = e.which || e.keyCode;
  return keyNum==13 ? false : true;
};

分析:

如果按钮用 <input /> 标签,标签的 type="submit" ,IE6、7、8、Firefox回车时均提交。

如果按钮用 <input /> 标签,标签的 type="button"

1 没有 <input type="text" value="" /> 回车均不提交。
2 有一个 <input type="text" value="" /> , IE6、7下焦点在何处回车均不会提交,IE8、只有焦点在 <input type="text" value="" /> 上时回车才会提交, Firefox均回车会提交。
3有多个 <input type="text" value="" /> ,IE6、7、8、Firefox均不会提交。

如果按钮用 <input /> 标签,标签的 type="" ,E6、7、8、Firefox均会默认为 type="text"

如果按钮用 <button> 标签,标签的 type="submit" ,E6、7、8、Firefox回车时均提交。

如果按钮用 <button> 标签,标签的 type="button"

1 没有 <input type="text" value="" /> 回车均不提交。
2 有一个 <input type="text" value="" /> , IE6、7下焦点在何处回车均不会提交,IE8、只有焦点在<input type="text" value="" />上时回车才会提交, Firefox均回车会提交。
3 有多个 <input type="text" value="" /> ,IE6、7、8、Firefox均不会提交。

如果按钮用 <button> ,标签的 type="" ,IE6、7下默认的 type="button" ,IE6、7下焦点在何处回车均不提交,IE8、Firefox默认为 type="submit" ,IE8、Firefox均回车会提交。

Posted in html | Tagged , , | Leave a comment

USpace帮助页面

uspace help page

demo

项目需求:

一个包含三十个页面的word文档,转换为html形式(无后台)

我的解决方案:

1 当浏览器不支持js时,页面显示所有帮助内容,依靠锚点来定位帮助标题对应内容,并在右下角加入“回顶部”的链接,方便用户浏览。

2 当浏览器不支持js时,点击帮助标题,用jQuery load方法读取相对应内容。

新的知识:

1 由于页面中文档是从word中拷贝,然后由Dreamweaver自动生成的页面,所以有很多需要替换的标签,运用了dw中正则表达式替换的功能。

将下列代码:

<a name="_Toc237403180" id="_Toc237403180">一般用户web端</a>
<a name="_Toc256498212" id="_Toc256498212">注册</a>

改为:

<h2>一般用户web端</h2>
<h2>注册</h2>

正则表达式:

查找 <a name=\".*\"\sid=\".*\">([\u4e00-\u9fa5]+)<\/a> 替换为 <h2>$1</h2>

2 css sprites 内存使用情况分析(仅在ie8中)

内存使用情况分析

小插曲:

页面做好后在ie看起来图片有点模糊,而且发现字体、排版总比firefox大25%左右,最终ie-查看-缩放-调整为100%后,一切ok!

回顾:

没有必要使用load方法。

Posted in Project | Leave a comment