0
点赞
收藏
分享

微信扫一扫

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

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


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


行间事件

什么是行间事件?

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

下面写一个示例,如下:


JavaScript 行间事件、提取行间事件_点击事件_02


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

那么下面点击执行一下看看,如下:


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


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

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

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

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

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

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

提取行间事件

接着上面的代码,处理思路如下:

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

实现如下:


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


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


JavaScript 行间事件、提取行间事件_点击事件_05


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

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


举报

相关推荐

0 条评论