html事件处理缺点,HTML内嵌事件处理的优缺点

HTML事件处理程序

function showMessage() {

alert('hello world');

}

复制代码

在这个例子中，单击按钮就会调用showMessage()函数。这个函数是在一个独立的

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

复制代码

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

复制代码

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

function () {

with(document) {

with(this) {

// 元素属性值

}

}

}

复制代码

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

复制代码

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

复制代码

在这个例子中，单击按钮会显示文本框中的文本。值得注意的是，这里直接引用了username元素。

不过，在HTML中指定事件处理程序有两个缺点。

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

function showMessage() {

alert('hello world');

}

复制代码

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

复制代码另一个缺点就是，这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同Javascript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。

最后一个缺点是HTML与Javascript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和Javascript代码。