发布于 2017-02-28 05:28:23 | 123 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
事件流：分两种，IE的是 事件冒泡流 ，事件开始时从最具体的元素接收，逐级向上传播到较为不具体的节点（Element -> Document）。与之相反的是 Netscape 的 事件捕获流 。
DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
大多数情况下都是将事件处理程序添加到事件流的冒泡阶段。一个 EventUtil 的栗子：
var EventUtil = {
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler); // IE8
}else{
element['on' + type] = handler;
}
},
removeHandler: function(){...}
}
下面我们详细来看：
DOM0级事件处理程序
通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。
var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;
优点:1.简单2.具有跨浏览器的优势
缺点:在代码运行之前不会指定事件处理程序，因此这些代码在页面中位于按钮后面，就有可能在一段时间怎么点击都没反应，用户体验变差。
DOM2级事件处理程序
定义了两个方法，用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。三个参数，1.要处理的事件名。2.作为事件处理程序的函数3.一个布尔值。最后这个布尔值为true,表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。
// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
alert('Hello World');
},false);
// 移除事件处理程序
btn.removeEventListener('click',function () {
// 匿名函数无法被移除,移除失败
},false);
// 改写
var handler = function () {
alert(this.id);
};
btn.addEventListener('click',handler,false);
// 再次移除事件处理程序
btn.removeEventListener('click',handler,false);// 移除成功
这两个事件处理程序会按照添加他们的顺序触发。大多数情况，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种版本的浏览器。
优点: 一个元素可以添加多个事件处理程序
缺点: IE8及以下浏览器不支持DOM2级事件处理程序。(包括IE8)
IE事件处理程序
定义了两个方法，与上类似:attachEvent(),detachEvent()。这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE8以及更早版本的浏览器只支持事件冒泡，所以通过detachEvent()添加的事件处理程序会被添加到冒泡阶段。
var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
alert( this );// window
});
btn.attachEvent('onclick', funciton(){
alert("HELLO, WORLD");
});
点击按钮，这两个事件处理程序的触发顺序与上述刚好相反。不是按照添加事件处理程序的顺序触发，刚好相反。
优点:一个元素可以添加多个事件处理程序
缺点:只支持IE。
跨浏览器的事件处理程序
eg:
var EventUtil = {
addHandler : function ( ele, type, handler ) {
if ( ele.addEventListener ) {
ele.addEventListener( type, handler, false );
} else if ( ele.attachEvent ) {
ele.attachEvent( 'on' + type, handler );
} else {
ele['on' + type] = handler
}
},
removeHandler: function ( ele, type, handler ) {
if ( ele.removeEventListener ) {
ele.removeEventListener( type, handler, false );
} else if ( ele.detachEvent ) {
ele.detachEvent( 'on' + type, handler );
} else {
ele[ 'on' + type ] = null;
}
}
}