使用Javascript停止元素事件的传播。非常简单,看代码:

[code lang=”js” highlight=”8″]
function stopPropagation(e) {
if (e && e.stopPropagation) e.stopPropagation(); //W3C;
else window.event.cancelBubble = true; //only ie;
}

<div onclick=”alert(‘div000000000000’);”>
DIV 000000000000000000
<a onclick=”alert(‘div1111111’); stopPropagation(event);” href=”javascript:void(0);”>DIV 111111111111</a
</div>
[/code]

使用Javascript取消浏览器的默认动作。无话可讲,看代码:

[code lang=”js” highlight=”6″]
function preventDefault(e) {
if (e && e.preventDefault) e.preventDefault(); //W3C;
else window.event.returnValue = false; //only ie;
}

<a onclick=”preventDefault(event);” href=”http://www.google.com” target=”_blank”>www.google.com</a>
[/code]

非IE浏览器增加 contains 方法:

[code lang=”js” highlight=””]
if (typeof (HTMLElement) != “undefined”) {
HTMLElement.prototype.contains = function (element) {
while (!!(element && element.nodeType == 1)) {
if (element== this) return true;
element= element.parentNode;
}
return false;
}
}
[/code]

在 mouseover 事件执行时先进行如下判断,结果为 true 时再执行方法体:

[code lang=”js” highlight=””]
var element = e.fromeElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOverFunc();
[/code]

在 mouseout 事件执行时先进行如下判断,结果为 true 时再执行方法体:

[code lang=”js” highlight=””]
var element = e.toElement || e.relatedTarget; //此处 e 为 mouseover event 事件对象;
if (!this.contains(element)) mouseOutFunc();
[/code]

在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。

event.fromElement 指向触发 onmouseover 和 onmouseout 事件时鼠标离开的元素;

event.toElement 指向触发 onmouseover 和 onmouseout 事件时鼠标进入的元素。

那么上面两行代码的含义就分别是:

当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;

当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;

这样,内部元素就不会干扰外层元素的 onmouseover 和 onmouseout 事件了。

使用 Javascript 的 window.open 方法弹出窗口后,弹出窗口(子窗口)与母窗口之间互相访问对象的方法:

子窗口访问母窗口对象的方法:子窗口使用 window.opener 即引用母窗口,比如:

[code lang=”js” highlight=””]
window.opener.setStr(); //执行母窗口的 setStr 方法;
[/code]

母窗口访问子窗口对象的方法:母窗口在 window.open 执行时把它引用给一个变量,这个变量既是子窗口的引用,比如:
[code lang=”js” highlight=””]
var w = window.open(“new.html”); //变量 w 既是弹出窗口的引用;
w.setStr(); //执行弹出窗口的 setStr 方法;
[/code]

[code lang=”js” highlight=””]
function jsonDecode(data) {
return new Function(“return ” + data + “;”)();
}
var jsonObj = jsonDecode(‘{ name: “名字”, age: 24 }’); //调用方法
alert(jsonObj.name + “:” + jsonObj.age);
[/code]

javascript的小括号“()”表达式可以帮助我们把javascript语句组合分块并且每对小括号都会返回一个值且在同一语句中具有优先执行权。例如:

[code lang=”js”]
var result, result2;
result = 5 * (2 + 3); //这是一个表达式,分别进行了加法和乘法的运算,结果是25。
alert(result2); //result2等于undefined,声明变量时并未赋值。下面的小括号表达式在此时并未执行,因为此时执行的alert操作是一个语句,下面的小括号表达式是另一语句,产生了两个语句,小括号只有在同一语句中才具有优先执行的权利。
(result2 = 6); //result2等于6。
[/code]

javascript会先执行小括号内的运算,2+3=5并把5返回然后在执行小括号外的运算,也就是5*小括号返回的5,结果是25。数学都学过,相信很容易理解。

小括号内不能声明变量并且不会改变括号内所执行语句的域。例如:

[code lang=”js”]
function a() {
(function _b() {});
alert(_b); //程序会报错,_b并未声明
}
function b() {
var _b;
(_b = function () {});
alert(_b); //结果是function () {}
}
a();
b();
alert(_b); //程序会报错,_b并未声明,上面b函数中的_b与此_b处不同的域。
[/code]

小括号表达式可以执行多条语句,每条语句用逗号结束,会返回最后一条语句执行结果的返回值。例如:

[code lang=”js”]
var a, b, c, result;
result = (a = 1, b = 2, c = 3, a * (b + c)); //小括号内会依次执行a变量的赋值、b变量的赋值、c变量的赋值、b变量加c变量的结果乘以a变量的操作并把结果返回赋值给result变量。
alert(result); //5
[/code]

小括号把javascript语句组合分块且不能声明变量,如果未遇到逗号或结束右括号则认为是一条语句。所以小括号括起来的匿名函数即使javascript引擎解析到}时也不会结束语句,所以函数后可以直接用括号使其运行。例如:

[code lang=”js”]
var a, b, c, result;
result = (function () { a = 2; }(), function () { b = 3; }(), function () { c = 4; }(), function () { return a * (b + c); }());
//小括号表达式内依次创建匿名函数并执行,共创建了四个匿名函数且都运行了,最后一个匿名函数运行后会返回运算的值且小括号表达式也会把此值返回并赋给变量result。
alert(result); //14
[/code]

合理利用小括号表达式可以简化程序的开发。例如利用小括号返回值执行匿名函数。例如:

[code lang=”js”]
var result;
(result = 5, function () { alert(result * 6); })(); //结果会弹出30
[/code]

首先程序声明变量result,然后执行小括号语句,result赋值5,创建一个匿名函数,并把这个匿名函数返回,最后直接用括号运行这个匿名函数。

注意:直接使用小括号表达式作为语句开始时此条语句的上一条语句结束时应该有分号,以免出现未知错误。例如:

[code lang=”js”]
var a = function () {
alert(a);
}
(a()); //会报错,上面声明匿名函数后进行赋值操作赋给变量a,这种方式声明的函数后面直接跟一对小括号时小括号的作用是运行这个函数,会认为小括号和函数是一条语句,所以函数结尾处应用引号结束语句。
function b() {
alert(b);
}
(b()); //正常,上面声明的函数是以函数字面量生成的函数而且并未进行赋值操作,javascript引擎解析的时候发现}就会自动结束,所以不用分号结束符也是正常的。
[/code]

Javascript下字符串连接运算的性能普遍不高,通常情况下字符串连接是使用了加法运算符(+)实现的,大部分新版本浏览器已对字符串连接做了优化。IE核心浏览器从IE8开始对字符串连接做了优化,但是IE6、IE7字符串连接未作优化,性能低下。这种情况下通常我们会使用Array对象的Join方法来实现字符串连接提升其性能。

主要代码:

[code lang=”js”]
(function () {
function Buffer() {
this.stringArray = new Array();
}
Buffer.prototype.append = function (str) {
this.stringArray.push(str);
}
Buffer.prototype.toString = function () {
return this.stringArray.join(“”);
}
String.Buffer = Buffer;
})();
[/code]

看演示:http://demo.joyfulboy.cn/js/string/string-append.html

主要代码:

[code lang=”js”]
String.prototype.removeRepeats = function () {
var str = this;
while (str.match(/(.).*?\1/g) != null) str = str.replace(RegExp.$1, “”);
return str;
}
[/code]

利用While循环和正则表达式查找字符串中相同的字符并删除该字符

看演示:http://demo.joyfulboy.cn/js/string/string-removeRepeats.html

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

想要使用JSONP进行跨域访问,必须服务器端支持。其实JSONP早已存在了,只是说法比较新颖,我们在实际应用中也肯定用过。来看个例子:

jsonp.html

[code lang=”js”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jsonp</title>
<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src="jsonp.js"></script>
</head>
<body>
</body>
</html>
[/code]

阅读全文»

演示地址:http://demo.joyfulboy.cn/js/imagesLazyLoad/index.html