HTML内嵌事件处理的优缺点-CSDN博客

HTML事件处理程序

<script type='text/javascript'>
    function showMessage() {
        alert('hello world');
    }
</script>
<input type='button' value='Click Me' onclick='showMessage()' />
复制代码

在这个例子中，单击按钮就会调用showMessage()函数。这个函数是在一个独立的<script>元素中定义的，当然也可以被包含在一个外部文件中。事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

这样指定事件处理程序具有一些独到之处。首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象：

<input type='button' value="Click Me" onClick='alert(event.type)'>
复制代码

通过event变量，可以直接访问事件对象，你不用自己定义它，也不用从函数的参数列表中读取。在这个函数内部，this值等于事件的目标元素。

<input type='button' value='Click Me' onclick='alert(this.value)'>
复制代码

关于这个动态创建的函数，另一个有意思的地方是它扩展作用域的方式。在这个函数内部，可以像访问局部变量一样访问document及该元素本身的成员。这个函数使用with像下面这样扩展作用域：

function () {
    with(document) {
        with(this) {
            // 元素属性值
        }
    }
}
复制代码

如此一来，事件处理程序要访问自己的属性就简单多了。下面这行代码与前面的例子效果相同：

<input type='button' value='Click Me' onclick='alert(value)'>
复制代码

如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素的入口，这个函数就变成了如下所示：

<form method='post'>
    <input type='text' name='username' value=''>
    <input type='button' value='Echo Username' onclick='alert(username.value)'>
</form>
复制代码

在这个例子中，单击按钮会显示文本框中的文本。值得注意的是，这里直接引用了username元素。
不过，在HTML中指定事件处理程序有两个缺点。

存在一个执行顺序的问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。以前面的例子来说明。

<input type='button' value='Click Me' onclick='showMessage()' />

<script type='text/javascript'>
    function showMessage() {
        alert('hello world');
    }
</script>
复制代码

如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。

<input type='button' value='Click Me' onclick='try{showMessage()}catch(ex){}'>
复制代码

另一个缺点就是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同Javascript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。
最后一个缺点是HTML与Javascript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和Javascript代码。