事件对象
事件处理函数的一个标准特性是，事件对象包含了上下文信息。例如，当处理键盘事件时可以访问该对象的keyCode属性来获得具体的键值。然而，事件对象在IE的实现与W3C的规范还是有差别。IE使用独立的全局事件对象（window.event），而其它浏览器则使用全局参数。下面的例子用来阻止textarea里面的回车键，从而不会产生额外的换行符。

// 查找页面的第一个<textare>并绑定键盘事件的监听函数
document.getElementByTagName("textarea")[0].onkeypress = function(e){
    // 如果不存在事件对象，则获取全局的对象（仅IE）
    e = e || window.event;

    // 如果键入了回车键，返回false（使它不产生任何行为）
    return e.keyCode != 40;
};

this关键字
this关键字用来访问当前对象。现代浏览器使用this关键字为所有的事件处理函数提供上下文。下面的例子是当点击时，改变所有<li>元素的背景和前景颜色

// 查找所有的<li>元素并绑定点击事件处理函数
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
    li&#91;i&#93;.onclick = handleClick;
}

// 点击事件处理函数
function handleClick() {
    this.style.backgroundColor = "blue";
    this.style.color = "white";
}
&#91;/code&#93;
<strong>取消事件冒泡</strong>
如果只希望事件发生在它的目标上而不是它的父元素上，则必须取消事件冒泡。阻止事件冒泡流动的情形如下图所示：
<a href="http://www.everyinch.net/wp-content/uploads/2013/12/stopBubble.gif"><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" /></a>
阻止事件冒泡可以为复杂的应用程序提供非常大的益处。但IE浏览器阻止冒泡的方法与其它浏览器不同，为此需要编写通用的取消冒泡的函数。

function stopBubble(e) {
    // 如果传入事件对象，那么就是非IE浏览器
    if ( e )
        // 因此采用W3C的方法
        e.stopPropagation();
    else
        // 否则，使用IE的方法来阻止事件冒泡
        window.event.cancelBubble = true;
}

下面的示例演示了阻止事件冒泡的作用。在每个DOM元素上增加了mouseover和mouseout事件，如果不组织事件冒泡，那么元素和其父元素都会有红色的边框，这和我们的预期不同。

// 遍历所有的DOM元素
var all = document.getElementsByTagName("*");
for ( var i = 0; i < all.length; i++ ) {

    // 监听mouseover事件
	// 当鼠标移动到元素上时，为元素增加了红色边框
    all&#91;i&#93;.onmouseover = function(e) {
        this.style.border = "1px solid red";
        stopBubble( e );
    };

   // 监听mouseout事件
	// 当鼠标从元素上移开时，删除添加的边框
    all&#91;i&#93;.onmouseout = function(e) {
        this.style.border = "0px";
        stopBubble( e );
    };

}
&#91;/code&#93;
<strong>重载浏览器的默认行为</strong>
对于大部分事件，浏览器都会发生默认行为。例如当点击&lt;a&gt;元素时会跳转到相关的链接上，这是浏览器的默认行为。在下图中演示了点击页面中的一个&lt;a&gt;元素后产生的结果，事件以捕获和冒泡阶段在DOM移动，一旦离开&lt;a&gt;元素，浏览器试图执行元素的默认行为，即跳转到其它的页面。
<a href="http://www.everyinch.net/wp-content/uploads/2013/12/stopDefault.gif"><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" /></a>
默认行为可以归结为没有明确指令而浏览器自动执行的行为，例如：
1. 点击&lt;a&gt;元素将重定向到它的href属性指明的url
2. 按Ctrl+S组合键，浏览器将保存网站的HTML文件
3. 提交&lt;form&gt;将向指定的URL提交数据，并重定向到该地址
4. 鼠标移动到一个有alt或title属性的&lt;img&gt;上就会出现提示文本
就算阻止事件冒泡或者没有绑定事件，浏览器还是会执行所有这些行为。为了阻止默认行为，需要特定的代码来处理。同样有IE的方式和W3C的方式。

function stopDefault( e ) {
    // 阻止浏览器的默认行为 (W3C)
    if ( e ) e.preventDefault();

    // IE
    return false;
}

该函数可以阻止浏览器的任何默认行为，它以事件对象作为参数，一般作为返回值使用，例如：return stopDefault(e);
下面的示例使所遇哦的链接都在一个内置的<iframe>中加载

// 假设页面上有个iframe，id是'iframe'
var iframe = document.getElementById("iframe");

// 定位页面上所有的<a>元素
var a = document.getElementsByTagName("a");
for ( var i = 0; i < a.length; i++ ) {

    // 为<a>绑定点击处理函数
    a[i].onclick = function(e) {
        // 设置iframe的地址
        iframe.src = this.href;

        // 阻止浏览器访问<a>所指向的网址
        return stopDefault( e );
    };
}

转载请注明：陈童的博客 » 事件 — JavaScript事件特性