JavaScript 行间事件、提取行间事件

仅供学习，转载请注明出处

行间事件

什么是行间事件？

将JavaScript函数写到HTML元素中的执行事件，那这种事件就是行间事件。

下面写一个示例，如下：

可以看到，在代码中点击则执行fnClick()方法。这种写在HTML元素中的方式就是行间事件。

那么下面点击执行一下看看，如下：

其中，可以看到点击按钮之后，下面div的字体就变了样式。

但是，可以看到在写fnClick() 函数的时候并没有用window.onload的方法包裹着，为什么没有抱错呢？

这是因为在点击事件的时候才会执行这个fnClick()函数，此时整体页面的内容都已经被加载了，所以不会抱错。

但是这样写行间事件有不少缺点。那就是JavaScript与HTML代码混淆在了一起，很不好。

应该要将JavaScript的函数提取出来，单独在js文件中编写，方便后续外部引入，这样才好管理。

那么这种提取方式，就是叫做提取行间事件。

提取行间事件

接着上面的代码，处理思路如下：

• 首先需要将HTML中的onclick="fnClick()"属性写到JavaScript代码中
• 因为此时fnClick()被提取之后，如果没有包裹window.onload的时候，在获取oDiv的时候就会抱错，所以需要加上window.onload的包裹。

实现如下：

点击一下按钮看看样式是否变化。

这里关键给input元素增加了id="btn1"，方便用来定位元素。 另一个要注意的是，在JavaScript中oBtn.onclick = fnClick;的fnClick不能写成fnClick()。 如果写成了fnClick()，那么就会直接执行。