JavaScript-事件
---恢复内容开始---
什么是事件
<script type="text/javascript">
function show() {
alert("yes");
}
DOM0级事件处理程序
thisOne.onclick = function() {
alert("yes..");
thisTow.addEventListener("click",function(){
thisTow.addEventListener("click",function(){
element.addEventListener(eventType,fn,false);
}
element.attachEvent("on"+eventType,fn);
}
},
if(element.addEventListener) {
element.removeEventListener(eventType,fn,false);
}else if(element.attachEvent) {
element.detachEvent("on"+eventType,fn);
}
}
JavaScript脚本与HTML文档之间的交互式通过事件来实现的，事件指的是在文档或浏览器窗口中发生的一些特定瞬间。
事件种类
一般事件
onclick 鼠标点击事件
ondbclick 鼠标双击事件
onmousedown 按下鼠标事件
onmouseup 按下鼠标后松开鼠标
onmousemove 鼠标移动事件
onmousemover 鼠标经过事件
onmouseout 鼠标离开事件
onkeypress 当键盘上某个键被敲下时触发此事件
onkeydown 当键盘上某个键敲下时触发的事件
onkeyup 当键盘上某个键被释放时触发此事件
页面事件
onabort 图片在下载时被用户中断
onload 页面内容加载完成时触发此事件
onscroll 当浏览器的滚动条位置发生变化时触发此事件
onresize 当浏览器的出口大小被改变时触发此事件
表单事件
onblur 当元素失去焦点时触发此事件
onchange 当前元素失去焦点并且被改变时触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单中的reset的属性被激发时触发的事件
onsubmit 当表单被提交时触发的事件
事件处理程序
事件就是用户或浏览器执行的某种操作，诸如click、mouseover、load都是事件名称。
响应某个事件的函数叫做事件处理函数。事件处理程序以on开头，因此click的事件处理程序是onclick。
JavaScript事件处理程序发展到现在分别经过以下这几个过程：
1.HTML事件处理程序
描述：某一个元素支持的某种事件，都可以使用一个与相应事件处理程序同名的HTML特性（也就是标签的属性）来指定。
就像下面代码：
<div onclick="alert('yes')">CSS</div>
当然可以把要执行的代码封装到函数里面去
<div onclick="show()">你好！</div>
<script type="text/javascript">
function show() {
alert("yes");
}
</script>
备注：事件处理函数在运行时，有权访问全作用作用域里任何代码。
HTML事件处理程序有以下几个缺点：
1.扩展事件处理程序的作用域链在某些浏览器会导致不同结果。
2.HTML代码与JavaScript代码耦合在一起，在代码更新和维护的时候显得异常困难。
3.如果没有封装到函数里，而是像上面例子那样直接写在标签里，那么会导致整站的代码量会非常大，通用性差。如果把代码提起出来放到到函数里，又会导致一个问题，如果在函数定义之前点击了按钮，就会报错，用户将完全不会看到JavaScript错误。
通过JavaScript 指定事件程序的方式，就是将一个函数赋值给一个事件处理程序属性。使用JavaScript指定事件处理程序，首先要获取一个要操作的对象引用。
备注：每一个元素都有自己的事件处理程序属性。
var thisOne = document.getElementById('thisDOM0');
thisOne.onclick = function() {
alert("yes..");
}
备注：使用DOM0级指定事件处理程序被认为是元素的方法。因此这个时候事件处理程序是在这个元素的作用域中运行的；换句话说，程序中的this就是指向当前元素。
DOM0级事件有个缺点：就是只能为一个事件目标对象绑定一个事件处理函数。
DOM2级事件处理程序
浏览器支持程度：IE9+、FireFox、Chrome、Safari、Opera
“DOM2级事件处理程序”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEeventListener()和removeEventListener()。
所有的DOM节点都包含着两个方法。
它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
这边布尔值，如果是true则表示事件会在事件捕获阶段触发；如果是false则表示事件会在事件冒泡阶段触发。
如下实例代码：
var thisTow = document.getElementById('thisDOM2');
thisTow.addEventListener("click",function(){
alert("yes..");
},false);
thisTow.addEventListener("click",function(){
alert("no");
},false);
thisTow.removeEventListener("click",function(){
alert("no");
},false);
备注：这样移除事件处理程序并没有效果，虽然看似所有的参数都一样，其实不然，这两个匿名函数并不是相同的函数。
备注：和DOM0级指定事件处理程序一样，这个时候的this指向所依附的元素。
IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个当方法接受两个参数：事件处理程序名称和事件处理函数。
IE8以及IE8以前的IE浏览器只支持事件冒泡阶段，所以attachEvent()添加的事件处理程序只会被添加到事件冒泡阶段。如下实例代码：
var thisIE = document.getElementById('thisIE');
thisIE.attachEvent("onclick",function(){
alert(this);
alert(this);
})
thisIE.attachEvent("onclick",function(){
alert("NONO");
})
alert("NONO");
})
thisIE.detachEvent("onclick",function(){
alert("NONO");
})
alert("NONO");
})
备注：同样的上面两个匿名函数并不是相同的函数，顾使用detachEvent()并不能删除attachEvent()指定的事件处理程序。
备注：以DOM0级不同的是，使用attachEvent()方法的情况下，事件处理程序在会在全局作用域中运行，因此this等于window。
跨浏览器的事件处理程序
具体要能够兼容当下所有的主流浏览器（主要是兼容IE8以及IE8以下的IE浏览器）
具体代码如下：
var eventUtil = {
// 事件绑定
addHandler: function(element,eventType,fn) {
addHandler: function(element,eventType,fn) {
// FF
if(element.addEventListener) {
if(element.addEventListener) {
element.addEventListener(eventType,fn,false);
}
// 低版本IE
else if(element.attachEvent) {
element.attachEvent("on"+eventType,fn);
}
},
// 事件移除
removeHander: function(element,eventType,fn) {
removeHander: function(element,eventType,fn) {
if(element.addEventListener) {
element.removeEventListener(eventType,fn,false);
}else if(element.attachEvent) {
element.detachEvent("on"+eventType,fn);
}
}
}
---恢复内容结束---
