那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

浏览器中关于事件的那点事儿

1

在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一个动作,或者说一个操作.

本文会介绍很多与事件有关的东西,虽然我的出发点有那么点一网打尽的意思,不过也难以盖全.所以就把最常用,最基本也相对重要的内容拿出来记录一下.

      Javascript绑定事件的方式

      传统的事件绑定

因为各种历史原因,事件的绑定在不同的浏览器总是有不同的写法,当然现在可能大多数人都已经习惯于jQuery的事件绑定,而不清楚javascript的原生事件绑定是什么样子.

非常传统的事件的绑定方式,是在一个元素上直接绑定方法,element.onclick = function(e){}

<body>
<input type=”button” id=”bt” name=”bt button” value=”this is a button”>
<script>
var bt = document.getElementById(“bt”);
bt.onclick = function(e){
alert(“this is a alert”);
alert(e.currentTarget.name);
}
</script>
</body>

 

这是传统的事件绑定,它非常简单而且稳定,适应不同浏览器.e表示事件,this指向当前元素.但是这样的绑定只会在事件冒泡中运行,捕获不行.一个元素一次只能绑定一个事件函数.

      W3C方式的事件绑定

W3C中推荐使用的事件绑定是用addEventListener()函数,element.addEventListener(‘click’,function(e){…},false),上代码:

<body>
<input type=”button” id=”bt” name=”bt button” value=”this is a button”>
<script>
var bt = document.getElementById(“bt”);
bt.addEventListener(‘click’,function(e){
alert(“this is a alert”);
alert(e.currentTarget.name);
},false);
</script>
</body>

 

如此的效果和之前的传统绑定方式是一样的,这 种绑定同时支持捕获和冒泡,addEventListener()函数最后的函数表达了事件处理的阶段,false(冒泡),true(捕获).这种方式 最重要的好处就是对同一元素的同一个类型事件做绑定不会覆盖,会全部生效.比如对上面代码bt元素在进行一次click的绑定,那么两次绑定的事件处理函 数都会执行,按照代码书写顺序.

但是IE浏览器不支持addEventListener()函数,只在IE9以上(包括IE9)可以使用.IE浏览器相应的要使用attachEvent()函数代替.

      IE下的事件绑定

IE下事件绑定的函数是attachEvent,它支持全系列的IE.但是如果你在Chrome等其他内核浏览器中使用这个函数去绑定事件,浏览器会报错的.

<body>
<input type=”button” id=”bt” name=”bt button” value=”this is a button”>
<script>
var name = “world”;
var bt = document.getElementById(“bt”);
bt.attachEvent(‘onclick’,function(){
alert(“hello “+ this.name);
});
</script>
</body>

 

attachEvent()函数支持事件捕获的冒泡阶段,同时它不会覆盖事件的绑定.但是一个缺点就是它处理函数中的this指向的是全局的window,所以上面代码弹出的结果会是”hello world”.

      冒泡和捕获

上面的绑定事件中提到了冒泡和捕获阶段的概念,这两个概念对于理解事件是很重要的,对于它们的理解还要涉及到DOM(文档对象模型)和事件流的概念.事件流就是一个事件对象沿着特定数据结构传播的这么一个过程.

所谓的事件对象就是Event,当一个元素上绑定的事件被触发时会产生一个事件对象,从一切皆对象的观点看这是很符合逻辑的.冒泡和捕获讲的就是事件流在DOM中两种不同的传播方式.对于冒泡和捕获的理解,我们还是从一个小的示例来看:

<body>
<div id=”bt1″ style=”width:300px;height:300px;border:1px solid red” name=”divbt1″>
<div id=”bt2″ style=”width:100px;height:100px;border:1px solid red” name=”divbt2″></div>
</div>
<script>
var bt1 = document.getElementById(“bt1″);
bt1.onclick = function(e){
alert(“bt1″);
}
var bt2 = document.getElementById(“bt2″);
bt2.onclick = function(e){
alert(“bt2″);
}
</script>
</body>

 

页面: 1 2

时间:2014-01-17

Comments are closed.

Search