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>

演示效果如下：