lt html gt dom,在JavaScript代码中使用HTML DOM给Html标记分配事件

01第一节：基本概念

对于IT界的编程开发者来说，有自己独特的编程思想固然重要，但是编程方式也要考虑在内，编程方式就是如何将代码有效的组织在一起且不会发生坍塌的情况，能让代码一直健壮下去。

Html DOM分配事件

就拿#JavaScript#编程来说，它是一种脚本编程语言，与HTML深度合作，且提供了大量的HTML DOM操作，DOM功能非常强大，是未来HTML+JavaScript开发者的核心关注点。

通过JavaScript代码操作Html DOM，则可以在完全没有任何Html代码的情况下，呈现出完整的Html页面。因为Html DOM具有创建Html标记的功能。

如果你以前在给html标记分配事件时，使用的是在事件属性(如onclick)上绑定JavaScript函数的方法，则需要你改变一下这种编程方式了。

02第二节：属性分配事件

首先，我们来看一下，如何给事件属性分配事件，绑定JavaScript函数，代码如下：

在此代码中，有一个名称为f1()的函数，封装了一些代码，然后使用标记的onclick事件属性将f1()函数与标记绑定起来。

on属性分配事件

使用这种绑定函数的事件是容易出错的，假如在Html代码中，不小心将onclick属性删除了，那么该Html标记将没有事件可触发，功能就不完整了。

当在文本框中输入内容后，点击“确定”按钮，此时就会触发f1()事件，弹出了带有文本内容的警告框。

看上去，这种方式使用起来并没有什么不好，事件也触发了，功能也正常运行了，但是还有一种更好的事件分配的方式。

下面，我们使用Html DOM API实现事件的分配，代码如下：

在此段代码中，我们发现，标记上没有任何事件属性，而是在JavaScript代码中，在getElementById()方法的后面使用了onclick属性指定事件处理程序，这种方式要优与使用on属性分配事件，不存在许多的牵扯。

使用DOM分配事件，所有的开发和维护都在一个地方，减少分布，且容易修改也不易出错，一种非常好的分配事件的方法。

运行一下上面的代码段，结果如下：

上图是已经单击过按钮出现的结果，表示使用DOM分配的事件已经触发了，事件绑定成功了。

在这里，我们将JavaScript代码放在了按钮的后面，这是因为JavaScript代码首先要查找到标记，只有查找到之后才可以分配事件。

举报/反馈