专栏首页Devops专栏JavaScript 行间事件、提取行间事件

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

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

行间事件

什么是行间事件?

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

下面写一个示例,如下:

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

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

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

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

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

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

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

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

提取行间事件

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

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

实现如下:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 正则表达式(r的作用)- 一个关于反斜杠转义的故事

    与大多数编程语言相同,正则表达式里使用"\"作为转义字符,这就可能造成反斜杠困扰。 假如你需要匹配文本中的字符"\",那么使用编程语言表示的正则表达式里将需要...

    Devops海洋的渔夫
  • Locust + python + influxdb + grafana 展示性能压测QPS图表

    在使用locust压测的时候,如果使用web则可以查看到QPS压测过程的曲线图。而如果使用no web模式启动,则只有一些打印的日志可以查看。

    Devops海洋的渔夫
  • Python win10下同时安装python3,python2

    安装很简单,只要打开进行下一步安装即可。 在安装的路径上我做了一下小修改,不过大家可以根据自己电脑具体情况修改即可。 我的安装路径则是如下: python...

    Devops海洋的渔夫
  • asp.net中几种页面元素的比较

    学习ASP.NET也快三个月了,今天才对页面中几种不同元素区分开,惭愧! 1)HTML元素:跟普通的网页中的标签所定义的一样,没有服务器端的事件响应,能够直接...

    用户1075292
  • k8s源码分析-----Mux And Broadcaster

    第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

    月牙寂道长
  • 刨根究底正则表达式之二——正则表达式基础

    虽然本系列文章开篇会简单介绍正则表达式的一些基础知识,但主要限于本系列文章所想强调的要点,因此本系列文章并不适合用于入门。

    用户1876609
  • Scala学习笔记(三)Scala的基础语法总结

    Scala 由于没有 Java 的三目运算符(?:),不过好在可以用 if/else 表达式替代它。

    fengzhizi715
  • C++11——对象移动与右值引用

    C++11新标准中一个最主要的特性就是提供了移动而非拷贝对象的能力。如此做的好处就是,在某些情况下,对象拷贝后就立即被销毁了,此时如果移动而非拷贝对象会大幅提升...

    Dabelv
  • GraphQL真香入门教程

    GraphQL 是 Facebook 开发的一种 API 的查询语言,与 2015 年公开发布,是 REST API 的替代品。

    用户1462769
  • Flink Forward 2019--k8s相关(1)--Flink未来部署方式

    Future of Apache Flink Deployments: Containers, Kubernetes and More - Till Rohrm...

    阿泽

扫码关注云+社区

领取腾讯云代金券