事件 — JavaScript事件特性
事件对象事件处理函数的一个标准特性是，事件对象包含了上下文信息。例如，当处理键盘事件时可以访问该对象的keyCode属性来获得具体的键值。然而，事件对象在IE的实现与W3C的规范还是有差别。IE使用独立的全局事件对象（window.event），而其它浏览器则使用全局参数。下面的例子用来阻止textarea里面的回车键，从而不会产生额外的换行符。
[code lang="js"]
// 查找页面的第一个并绑定键盘事件的监听函数
document.getElementByTagName("textarea")[0].onkeypress = function(e){
// 如果不存在事件对象，则获取全局的对象（仅IE）
e = e || window.event;
// 如果键入了回车键，返回false（使它不产生任何行为）
return e.keyCode != 40;
};
[/code]
this关键字
this关键字用来访问当前对象。现代浏览器使用this关键字为所有的事件处理函数提供上下文。下面的例子是当点击时，改变所有<li>元素的背景和前景颜色
[code lang="js"]
// 查找所有的
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
li[i].onclick = handleClick;
}
// 点击事件处理函数
function handleClick() {
this.style.backgroundColor = "blue";
this.style.color = "white";
}
[/code]
取消事件冒泡
如果只希望事件发生在它的目标上而不是它的父元素上，则必须取消事件冒泡。阻止事件冒泡流动的情形如下图所示：
<img src="http://www.everyinch.net/wp-content/uploads/2013/12/stopBubble.gif" alt="stopBubble" width="355" height="274" class="alignnone size-full wp-image-3967" />
阻止事件冒泡可以为复杂的应用程序提供非常大的益处。但IE浏览器阻止冒泡的方法与其它浏览器不同，为此需要编写通用的取消冒泡的函数。
[code lang="js"]
function stopBubble(e) {
// 如果传入事件对象，那么就是非IE浏览器
if ( e )
// 因此采用W3C的方法
e.stopPropagation();
else
// 否则，使用IE的方法来阻止事件冒泡
window.event.cancelBubble = true;
}
[/code]
下面的示例演示了阻止事件冒泡的作用。在每个DOM元素上增加了mouseover和mouseout事件，如果不组织事件冒泡，那么元素和其父元素都会有红色的边框，这和我们的预期不同。
[code lang="js"]
// 遍历所有的DOM元素
var all = document.getElementsByTagName("*");
for ( var i = 0; i < all.length; i++ ) {
// 监听mouseover事件
// 当鼠标移动到元素上时，为元素增加了红色边框
all[i].onmouseover = function(e) {
this.style.border = "1px solid red";
stopBubble( e );
};
// 监听mouseout事件
// 当鼠标从元素上移开时，删除添加的边框
all[i].onmouseout = function(e) {
this.style.border = "0px";
stopBubble( e );
};
}
[/code]
重载浏览器的默认行为
对于大部分事件，浏览器都会发生默认行为。例如当点击<a>元素时会跳转到相关的链接上，这是浏览器的默认行为。在下图中演示了点击页面中的一个<a>元素后产生的结果，事件以捕获和冒泡阶段在DOM移动，一旦离开<a>元素，浏览器试图执行元素的默认行为，即跳转到其它的页面。
<img src="http://www.everyinch.net/wp-content/uploads/2013/12/stopDefault.gif" alt="stopDefault" width="350" height="259" class="alignnone size-full wp-image-3968" />
默认行为可以归结为没有明确指令而浏览器自动执行的行为，例如：
1. 点击<a>元素将重定向到它的href属性指明的url
2. 按Ctrl+S组合键，浏览器将保存网站的HTML文件
3. 提交<form>将向指定的URL提交数据，并重定向到该地址
4. 鼠标移动到一个有alt或title属性的<img>上就会出现提示文本
就算阻止事件冒泡或者没有绑定事件，浏览器还是会执行所有这些行为。为了阻止默认行为，需要特定的代码来处理。同样有IE的方式和W3C的方式。
[code lang="js"]
function stopDefault( e ) {
// 阻止浏览器的默认行为 (W3C)
if ( e ) e.preventDefault();
// IE
return false;
}
[/code]
该函数可以阻止浏览器的任何默认行为，它以事件对象作为参数，一般作为返回值使用，例如：return stopDefault(e);
下面的示例使所遇哦的链接都在一个内置的<iframe>中加载
[code lang="js"]
// 假设页面上有个iframe，id是'iframe'
var iframe = document.getElementById("iframe");
// 定位页面上所有的元素
var a = document.getElementsByTagName("a");
for ( var i = 0; i < a.length; i++ ) {
// 为绑定点击处理函数
a[i].onclick = function(e) {
// 设置iframe的地址
iframe.src = this.href;
// 阻止浏览器访问所指向的网址
return stopDefault( e );
};
}
[/code]
查看完整版本： 事件 — JavaScript事件特性
Tags: