JS事件处理函数

在 JavaScript 中，事件处理函数是一类特殊的函数，与函数直接量结构相同，主要任务是实现事件处理，为异步调用，由事件触发进行响应。

事件处理函数一般没有明确的返回值。不过在特定事件中，用户可以利用事件处理函数的返回值影响程序的执行，如果单击超链接时，禁止默认的跳转行为。

示例1

下面示例为 form 元素的 onsubmit 事件属性定义字符串脚本，设计当文本框中输入值为空时，定义事件处理函数的返回值为 false。这样将强制表单禁止提交数据。

<form id="form1" name="form1" method="post" action="http://www.mysite.cn/" onsubmit="if (this.elements[0].value.length==0) return false;">
    姓名：<input id="user" name="user" type="text" />
    <input type="submit" name="btn" id="btn" value="提交" />
<form>

 在上面代码中，this 表示当前 form 元素，elements[0] 表示姓名文本框，如果该文本框的 value.length 属性值长度为 0，表示当前文本框为空，则返回 false，禁止提交表单。

事件处理函数不需要参数。在 DOM 事件模型中，事件处理函数默认包含 event 参数对象，event 对象包含事件信息，在函数内进行传播。

示例2

下面示例为 button 对象绑定一个单击事件。在这个事件处理函数中，参数 e 为形参，响应事件之后，浏览器会把 event 对象作为一个实参进行传递，读取 event 对象包含的事件信息，在事件处理函数中输出当前源对象节点名称。

<button id="btn">按钮</button>
<script>
    var button = document.getElementById("btn");
    button.onclick = function () {
        var e = e || window.event;  //获取事件对象
        document.write(e.srcElement ? e.srcElement : e.target);  //获取当前单击对象的标签名
    }
</script>

演示效果如下：

 

IE 事件模型和 DOM 事件模型对 event 对象的处理方式不同：IE 把 event 对象定义为 window 对象的一个属性，而 DOM 事件模型把 event 定义为事件处理函数的默认参数。所以，在处理 event 参数时，应该判断 event 在当前解析环境中的状态，如果当前浏览器支持，则使用 event（DOM 事件模型）；如果不支持，正则说明当前环境是 IE 浏览器，通过 window.event 获取 event 对象。

event.srcElement 表示当前事件的源，即响应对象的当前对象，这是 IE 模型用法。但是 DOM 事件模型不支持该属性，需要使用 event 对象的 target 属性，它是一个符合标准的源属性。为了能够兼容不同的浏览器，这里使用了一个条件运算符，先判断 event.srcElement 属性是否存在，如果不存在则使用 event.target 属性来获取当前事件对象的源。

在事件处理函数中，this 表示当前事件对象，与 event 对象的 srcElement 属性（IE 模型）或者 target（DOM 事件模型）属性所代表的意思相同。

示例3

在下面示例中，定义当单击按钮时改变当前按钮的背景色为红色，其中 this 关键字就表示 button 对象。

<button id="btn" onclick="this.style.background='red';">按 钮</button>

也可以使用下面代码来表示：

<button id="btn" onclick="(event.srcElement?event.srcElement:event.target).style.background='red';">按 钮</button>

在一些特殊环境中，this 并非都表示当前事件对象。

示例4

下面示例分别使用 this 和事件源来指定当前对象，但是会发现 this 并没有指向当前的事件对象按钮，而是指向 window 对象，所以这个时候继续使用 this 引用当前对象就错了。

<script>
    function btn1 () {  //事件处理函数，函数中的this表示调用该函数的当前对象
        this.style.background = "red";
    }
    function btn2 (event) {  //事件处理函数
        event = event || window.event;  //获取事件对象event
        var src = event.srcElement ? event.srcElement : event.target;  //获取当前事件源
        src.style.background = "red";  //改变当前事件源的背景色
    }
</script>
<button id="btn1" onclick="btn1()">按 钮1</button>
<button id="btn2" onclick="btn2(event)">按 钮2</button>

 为了能够准确获取当前事件对象，在第二个按钮的 click 事件处理函数中直接把 event 传递给 btn2()。如果不传递该参数，支持 DOM 事件模型的浏览器就会找不到 event 对象。