1.事件流的区别

Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-03-10 02:03
Blog:

预加载文件一般有两种常用的方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块),然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制,且如今网站的静态文件都是部署在cdn服务器上,如何预加载css
js文件也变有点玄妙了。

IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例:

用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现
第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题
第二个是采用Json数据格式构建,是我的第二次尝试改进
第三个与第二个其实是一样的,只不过将数据分离到JS文件中,我的代码中有一个ASP文件,是调用数据库生成Json省市区数据的,如果页面直接调用ASP文件,速度会很慢,生成JS文件后直接调用就要快的多,而且这部分数据一般不会改动

Stoyan Stefanov
撰文简明的阐述了一种加载文件而不会让之执行的方法。原文可见

复制代码 代码如下:

更新记录:

具体的方法是,ie中使用 new Image().src
去预加载文件,而其他浏览器使用动态插入的 <object>
标签来完成加载。
部分代码如下

<body>
<div>
<button>点击这里</button>
</div>
</body>

++2010-04-19 12:11:24
多加了一个插件的例子,其实不算插件,就是一函数,为什么不写成插件,只是基于灵活性的考虑,
让select可以放在页面的任何位置,而不是局限在div、table、td等页面元素内
参数类似下面,s1/s2/s3配置select的id,v1/v2/v3为默认值,如果不想设置请设置为null,或者直接不设置

复制代码 代码如下:

冒泡型事件模型: button->div->body (IE事件流)

参数配置如下,配置select的三个ID和默认值就行,无默认值填写为null

window.onload = function () {

捕获型事件模型: body->div->button (Netscape事件流)

复制代码 代码如下:

var i = 0,
max = 0,
o = null,

DOM事件模型: body->div->button->button->div->body
(先捕获后冒泡)

var defaults = {
s1:’Select1′,
s2:’Select2′,
s3:’Select3′,
v1:null,
v2:null,
v3:null
};

// list of stuff to preload
preload = [
‘ echo $id;
?>.sleep.expires.png’,
‘ echo $id;
?>.sleep.expires.js’,
‘ echo $id;
?>.sleep.expires.css’
],
isIE = navigator.appName.indexOf(‘Microsoft’) === 0;

2.事件侦听函数的区别
IE使用:
[Object].attachEvent(“name_of_event_handler”, fnHandler);
//绑定函数
[Object].detachEvent(“name_of_event_handler”, fnHandler);
//移除绑定

这算是第四个例子,目录下的php文件是服务端数据的生成Demo,用作使用的参考

for (i = 0, max = preload.length; i < max; i += 1) {

DOM使用:
[Object].addEventListener(“name_of_event”, fnHandler, bCapture);
//绑定函数
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);
//移除绑定

数据格式定义类似如下:

if (isIE) {
new Image().src = preload[i];
continue;
}
o = document.createElement(‘object’);
o.data = preload[i];

bCapture参数用于设置事件绑定的阶段,true为捕获阶段,false为冒泡阶段。

复制代码 代码如下:

// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = “hidden”;
//o.type = “text/plain”; // IE
o.width = 0;
o.height = 0;

示例代码:

var threeSelectData={
“省份”:{val:””,items:{“城市”:{val:””,items:{“区县”:””}}}},
“beijing”:{val:”01″,items:{
“bj-01″:{val:”0101”,items:{
“bj-01-01″:”010101”
}},
“bj-02″:{val:”0102”,items:{
“bj-02-01″:”010201”,
“bj-02-02″:”010202”
}}
}},
“shanxi”:{val:”02″,items:{}},
“guangzhou”:{val:”02″,items:{}}
};

// only FF appends to the head
// all others require body
document.body.appendChild(o);
}
};

复制代码 代码如下:

代码例子:

demo 可见

function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent(“on”+eventType, fnHandler);
}else{ //others
object[“on”+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent(“on”+eventType, fnHandler);
}else{ //others
object[“on”+eventType]=null;
}
}
addEventHandler(oDiv,”click”,function(){alert(“clicked”)});

复制代码 代码如下:

几点说明:

发表评论

电子邮件地址不会被公开。 必填项已用*标注