javascript的事件处理(二)——跨游览器编程

      IE 与DOM游览器的区别

      在上文《javascript的事件处理(一)——基础原理》中的各种例子,addEventListener()产生的事件监听在chrome和firfox中有效,但在IE中是无效,这是因为IE实现了类似与DOM中类似的两个方法:attachEvent()和detachEvent(),使用方法值DOM的相类似,不同的是IE只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。具体代码如下:

<button id = 'mybutton5' >Button5</button>
<script type = 'text/javascript'>

var bn5 = document.getElementById('mybutton5');
bn5.attachEvent('onclick',function(){
alert('IE attachEvent');
});

bn5.detachEvent('onclick',function(){
//do something
});

</script>

    它与DOM区别:

    1. attachEvent()的第一个参数时“onclick”,而addEVentListener()则是“click”。

    2. 作用域不同。attachEvent()中处理程序会在全局作用域中运行,this等于window,而DOM级方法中,处理程序会在所属元素的作用域中运行。

    3. attachEvent()和addEventListener()都可以为同一元素添加多个事件处理程序,DOM是按照添加它们的顺序执行,而IE则是按相反顺序被执行。

 

    跨游览器的事件处理程序

    1. 自己写程序,原理很简单,先对游览器进行能力检测,再添加方法,具体:

<button id = 'mybutton7' >Button7</button>
<script type = 'text/javascript'>
var EventUtil = function(){};
EventUtil.prototype.addHadler = function(element,action,hadler){
if(element.addEventListener){
alert('addEventListener function');
element.addEventListener(action,hadler,false);
}
else if(element.attachEvent){
alert('attachEvent function');
element.attachEvent('on'+action,hadler);
}
else{
alert('element["on"+action]');
element['on'+action] = hadler;
}
}

EventUtil.prototype.removeHadler = function(element,action,hadler){
if(element.removeEventListener){
element.removeEventListener(action,hadler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+action,hadler);
}
else{
element['on'+action] = null;
}

}

var hadlerfunction = function(){
alert('hadlefunction');
}

var bn7 = document.getElementById('mybutton7');
var eu = new EventUtil();

eu.addHadler(bn7,'click',hadlerfunction);


</script>

      这里为了方面起见,我使用了面向对象的逻辑,创建一个名叫EventUtil的对象,它有两个方法addHadler和removeHadler,分别用来注册和删除事件处理程序。

     

      2. jquery类库

      jquery是javascript的一个类库,能极大地方便简化javascript的编程

<script type = 'text/javascript' src = './jquery.js'></script>
<script type = 'text/javascript'>
$(document).ready(function(){
$('#mybutton6').click(function(){
alert('jquery button6 ');
});
});
</script>


<button id = 'mybutton6' >Button6</button>


     

这两篇文章主要是自己的学习笔记,大部分内容可以参见《javascript高级程序设计》中的事件一章。 

posted @ 2012-01-16 21:27  lengyuhong  阅读(672)  评论(1编辑  收藏  举报