JavaScript事件一瞥

事件处理程序

1、  html事件处理

html事件处理的写法如下：

<input type="button" value="Click Me" onclick="sayHello()" />
<script language="javascript" type="text/javascript">
    function sayHello() {
        alert("Hello World");
    }
</script>

html事件处理的写法使HTML与JavaScript过于紧密的耦合，增加代码维护的成本，另外假如JavaScript代码写在页面底部，有可能HTML元素出现的时候，JavaScript代码还没加载，这是点击HTML元素时，就会出错。

2、  DOM0事件处理

DOM0事件处理的写法如下：

<input type="button" value="Click Me"  id="btnHello" />
var btn = document.getElementById("btnHello");
    btn.onclick = function () {
        alert("Hello World");
    }

DOM0事件处理方法被认为是元素的方法，在处理程序中用this可以访问元素的任何属性和方法。

<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    btn.onclick = function () {
        alert(this.id); //btnHello
    }
</script>

DOM0删除事件处理方法只需把处理程序的属性设置为NULL即可，

btn.onclick = null。

3、  DOM2事件处理程序

DOM2事件处理程序的写法如下：

<input type="button" value="Click Me"  id="btnHello" />
   var btn = document.getElementById("btnHello");
    btn.addEventListener("click", function () {
        alert("Hello World");
    }, false);

AddEventListener(),最后一个参数如果是true表示在事件捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

这种写法的好处是可以给同一事件添加多个处理程序。

<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    btn.addEventListener("click", function () {
        alert("Hello World");
    }, false);
    btn.addEventListener("click", function () {
        alert(this.id);
    }, false);
</script>

可以用如下形式移除事件处理程序。

<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    var sayHello = function () {
        alert("Hello World");
    };
    btn.addEventListener("click", sayHello, false);
    btn.removeEventListener("click", sayHello, false);
</script>

IE事件处理程序：

IE只支持事件冒泡，通过attachEvent()和detachEvent()添加和解除事件处理。

<input type="button" value="Click Me"  id="btnHello" />
<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    var sayHello = function () {
        alert("Hello World");
    };
    btn.attachEvent("onclick", sayHello, false);
</script>

IE的时间处理程序在全局作用域中运行，因此this等于window。

事件对象

凡是兼容DOM的浏览器都会将一个event对象传入到事件处理程序中。

<input type="button" value="Click Me"  id="btnHello" />
<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    btn.onclick = function (event) {
        alert(event.target.id);
    }
    btn.addEventListener("click", function (event) {
        alert(event.target.id);
    }, false);
</script>

可以用preventDefault()取消事件默认行为,stopPropagation()方法停止事件在DOM层中的传播。

<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    btn.onclick = function (event) {
        event.preventDefault();
    }
</script>

IE中的事件对象

IE中，使用DOM0进行事件处理程序是，event作为window一个属性存在。如果是DOM2，就做为一个event对象传入。

<input type="button" value="Click Me"  id="btnHello" />
<script language="javascript" type="text/javascript">
    var btn = document.getElementById("btnHello");
    btn.onclick = function () {
        alert(window.event.srcElement.id);
    }
    btn.attachEvent("onclick", function (event) {
        alert(event.srcElement.id);
    });
</script>

在IE中可以用event.returnValue=false;来取消事件的默认行为，用event.cancelBuble=true

来阻止事件冒泡。