JavaScript中事件回顾

事件其实在第一次学习JavaScript的时候就接触了，一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件。事件是什么呢？事件在基于浏览器编程的语言JavaScript中是一个非常非常重要的方法，遍地都是这种语法。什么是事件呢？在JavaScript中事件可以理解为发生的一件事情，事件这个对象记录了这个过程中所有的数据。

1.事件的兼容性处理

准所周知，现在很多浏览器中分为标准浏览器阵营Chrome、FireFox等，非标准浏览器就是IE为代表了，在写代码的时候处处都要小心他们之间的兼容问题，这是家常便饭了。事件也不例外同样需要处理这些兼容性的问题。

理解事件最重要的是上面提到的事件对象：

IE/Chrome:event是一个内置对象
FireFox:是通过事件函数的第一个参数将事件对象传入

document.onclick = function(ev){//在IE FireFox中显示的内容完全不一样，所以需要对事件进行处理alert(event);//为了兼容各种浏览器可以采用如下的写法var ev = ev || window.event ;var str = '';var i = 0 ;//在ev事件对象中保存了事件发生过程中的所有信息，遍历事件对象中的信息，输出到页面中观察所有的信息for(var attr in ev){++i ;str += i + ' . '+ attr + ' ---> ' + ev[attr] + '<br>';}//将信息添加到页面中document.body.innerHTML = str ;
}

上面的代码中var ev = ev || window.event ;使用了一种或的方式完成了非常完美的兼容性问题。其实在JavaScript中还有一种完美的方法处理兼容性的问题就是用if....else ...进行判断，这两种方法给我处理兼容性问题提供了非常好的解决方法。

2.事件冒泡及案例

1.事件冒泡

事件冒泡非常经典的案例，不多说了，上一段网上非常经典的代码直接看结果，就理解是怎么回事了？

<script type="text/javascript">window.onload = function(){//获取页面中的三个元素对象var objDiv1 = document.getElementById('div1');var objDiv2 = document.getElementById('div2');var objDiv3 = document.getElementById('div3');//事件函数，将当前ID进行显示function func(){alert(this.id);}//给三个DIV同时绑定一个事件函数objDiv1.onclick = func ;objDiv2.onclick = func ;objDiv3.onclick = func ;}
</script>
<!-- 三个DIV在物理上是包含的关系-->
<div id="div1"><div id="div2"><div id="div3"></div></div>
</div>

点击DIV3发现弹出了三个结果，事实上只给DIV3绑定了一个事件函数。这就是典型的事件冒泡。有的网友说和DIV的物理位置有关，其实和DIV之间的包含关系有关，和物理上的定位关系没有半毛钱的关系的，做个试验就知道了。

2.利用事件冒泡的案例
下面的案例模拟的是网页边栏分享功能的实现，当鼠标移动到网页边栏分享的时候就出现一个DIV可以选择分享到那个网站上面的列表，可以将“分享到”放到子DIV中利用事件冒泡原理，将事件的处理给父级DIV处理。这样就很轻松实现了，如下代码：

<style type="text/css">#box{width: 100px;height: 250px;position: absolute;top: 200px;left: -100px;background: pink;}#slider{width: 20px;height: 90px;background: grey;position: absolute;right: -20px;top: 20px;text-align: center;font-size: 13px;}
</style>
<script type="text/javascript">window.onload = function(){var objBox = document.getElementById('box');//鼠标移入事件交给父级DIV处理objBox.onmouseover = function(){objBox.style.left = '0';}//鼠标移出事件交给父级DIV处理objBox.onmouseout = function(){objBox.style.left = '-100px';}}
</script>
<!-- 注意网页结构 -->
<div id="box"><div id="slider">点击分享</div>
</div>

3.事件的绑定和捕获的理解

1.什么是事件绑定呢？

上面代码中的这段objDiv1.onclick = func ;就是事件绑定。只是这种写法有局限性，对于一个对象绑定两个事件就无能为力了，下面的可能覆盖上面的了。

function fn1(){alert(this);//alert('JavaScript');
}
function fn2(){alert('jQuery');
}
//下面的事件绑定覆盖了上面的绑定事件
document.onclick = fn1 ;
document.onclick = fn2 ;

所以就诞生了事件的绑定函数attachEvent()和addEventListener()两个函数，为啥有两个呢？不多说了浏览器多，对付两个阵营的浏览器的绑定事件的，所以还要处理兼容性的问题，在处理兼容性的问题，要搞清楚这个两个绑定事件函数的区别如下代码和分析：

function fn1(){alert(this);//alert('JavaScript');
}
function fn2(){alert('jQuery');
}
//非标准IE绑定事件函数
document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);//标准浏览器的绑定事件函数
document.addEventListener('click',fn1,false);           document.addEventListener('click',fn2,false);

仔细观察上面的执行结果总结出如下区别：

非标准IE attachEvent(‘事件名称’，‘事件函数’);

高版本IE执行时正序
事件名称前面有on
事件没有捕获
调用的时候this指向window（this指针问题经常遇到）

标准：addEventListener(事件名称，事件函数，是否捕获);其中是否捕获默认是false false:冒泡 true:捕获

事件名称没有on
事件执行时正序
事件进行捕获
这个时候可以封装一个函数同意解决这个兼容的问题如下：

//eventObj表示要绑定事件的对象，eventName绑定事件名称，funName事件函数
function bindEvent(eventObj,eventName,funName){//标准浏览器if(eventObj.addEventListener){eventObj.addEventListener(eventName,funName,false);} else {//非标准浏览器eventObj.attachEvent('on'+eventName,function(){//修正this指向问题funName.call(eventObj);});}
}function fn1(){alert(this);
}
//调用测试
bindEvent(document,'click',fn1);

上述中可能难理解的call()函数，call()函数就是调用函数的意思。和普通的调用一样。其实call()是方法对象下面的一个方法，正常调用函数都是函数名加上括号就可以调用了。还有一种方法就是函数名.call(参数一，参数二，参数三…);

参数一表示调用方法过后this指向的对象
参数二以后的参数都是函数的传入参数

function fn3(arg1,arg2){alert(this);alert(arg1 + arg2);
}
//document参数就是函数执行完毕要返回的对象，从第二个参数开始就是函数的参数了
fn3.call(document,66,99);

2.事件的捕获
上面绑定事件的函数中最后出现了一个参数，参数的意思就是是否捕获事件的意思，那么到底事件捕获可以怎么理解呢？

当设置false的时候事件向外冒泡
当设置true向内捕获事件
一个是事件进来的时候触发事件函数
一个是事件出去的时候触发事件函数
通过下面的代码就很容易理解了：

<script type="text/javascript">window.onload = function(){var objDiv1 = document.getElementById('div1');var objDiv2 = document.getElementById('div2');var objDiv3 = document.getElementById('div3');//观察程序的执行顺序objDiv1.addEventListener('click',function(){alert(3);},false);objDiv2.addEventListener('click',function(){alert(1);},true)objDiv3.addEventListener('click',function(){alert(2);},false);}
</script>
<div id="div1"><div id="div2"><div id="div3"></div></div>
</div>

注意分析上述代码。

4.键盘事件

键盘事件中经常用到一下这些事件：

onkeydown:当键盘按下的时候触发
onkeyup:当键盘抬起的时候触发
ev.keyCode：键盘按键的值，数字类型
ctrlKey,altKey,shiftKey：返回布尔值

模拟聊天室的案例：

<script type="text/javascript">window.onload = function(){var objText = document.getElementById('txt');var objUl = document.getElementById('ulOne');//当按键抬起的时候触发objText.onkeyup = function(ev){var ev = ev || window.event ;if(this.value != ''){if(ev.keyCode == 13 ){var objLi = document.createElement('li');objLi.innerHTML = this.value ;if(objUl.children[0]){objUl.insertBefore(objLi,objUl.children[0]);} else {objUl.appendChild(objLi);}//清空文本框中的内容this.value = '';}}}}
</script><input type="text" id="txt">
<ul id="ulOne">
</ul>

5.阻止事件的默认行为的方法

阻止事件的默认行为，例如常见的浏览器右键的时候自动弹出浏览器本身的绑定的右键事件，有时候写程序不需要这些默认的事件，而是自己自定义事件，这个时候阻止默认事件可以在函数中使用 return false；

6.拖动案例

经常看到富文本框架中的panel可以进行窗口的变大和缩小，同时可以进行拖动。拖动是什么原理呢？当鼠标点击DIV的时候发生onmousedown事件，鼠标按下后移动鼠标发生onmousemove事件，拖动到目的地后鼠标要抬起的时候发生onmouseup事件，这就是整个拖动的原理。

var objDiv = document.getElementById('box');objDiv.onmousedown = function(ev){//获取事件对象var ev = window.event || ev ;//计算鼠标点击点离DIV边缘的距离var disX = ev.clientX - objDiv.offsetLeft ;var disY = ev.clientY - objDiv.offsetTop ;document.onmousemove = function(ev){var ev = window.event || ev ;objDiv.style.left = ev.clientX - disX + 'px';objDiv.style.top = ev.clientY - disY + 'px';}document.onmouseup = function(){document.onmousemove = document.onmouseup = null ;}
}

今天内容确实多了点，太累了，洗洗睡觉了。。。

非常高兴和大家交流学习
自由转载，创意许可，请文章来源，来自这里
(http://blog.csdn.net/unikylin)