首页 > 其他分享 >html 元素的 onEvent 与 addEventListener

html 元素的 onEvent 与 addEventListener

时间:2024-04-09 14:45:07浏览次数:22  
标签:function onEvent alert html file addEventListener input name

对于 html 元素的 onEvent,我们想要给其添加 function handler() {},有时候会弄不清楚到底是添加

<div onEvent="handler">

还是添加

<div onEvent="handler()">

下面两段等价的代码说明了问题

<input type="file" onchange="showFile(this)">

<script>
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
}
</script>

等价于

<input id='myFile' type="file" >

<script>

myFile.addEventListener('change', handler)

function handler(event) {
  showFile(this); // 这里的 this 就指向了 myFile
}
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
}
</script>

即我们应当添加

<div onEvent="handler()">

标签:function,onEvent,alert,html,file,addEventListener,input,name
From: https://www.cnblogs.com/dongling/p/18123930

相关文章

  • ludic 基于纯python 开发动态html 页面的框架
    ludic使用了htmx进行页面的处理,同时基于starlette提供asgiweb能力包含的特性基于python的无缝的htmx集成快速开发web基于python类型系统的类型组件基于starlette的异步搞性能web处理基于pythonf-strings的html构建基于主题的组件css样式添加说明目前ludic......
  • Javaweb开发:HTML【1】
    目录Javaweb路线HTML基础知识DOCTYPE声明HTML标签文本版面的编辑演示标签使用对齐属性原样显示文字标签使用居中标签水平分割线标题文字标签特定文字样式标签超链接分为:内部链接、外部链接链接到同一文档的各个部分使用电子邮件背景图像的设定插入图像添加视频/音频滚动文字meta......
  • 21个HTML技巧你必须了解的
    在这篇文章中,我将分享21个HTML技巧,包括代码片段,可以提升你的编码技能。让我们立即开始吧。......
  • 一个简单的Java程序,结合HTML页面,用于随机抽取人员
    importjava.util.ArrayList;importjava.util.List;importjava.util.Random;importjava.util.Scanner;publicclassRandomNamePicker{publicstaticvoidmain(String[]args){Scannerscanner=newScanner(System.in);List<String&g......
  • python计算机毕设【附源码】基于html的校园网设计与实现(django+mysql+论文)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在信息技术快速发展的今天,互联网已经成为人们获取信息、交流沟通的重要平台。对于学校而言,拥有一个功能齐全、操作简便的校园网系统显得尤为重要。基于HTML......
  • HTML笔记
    HTML​ 引言:HTML(超文本标记语言),可以理解为是网页的一个骨架,支撑着整个网页。标签分为双标签和单标签(自闭合标签),HTML中绝大多数都是双标签;在HTML中通过CSS选择器对网页元素进行样式,通过JavaScript进行网页的交互效果。标签名汇总1、网页的基本HTML结构:<!DOCTYPEhtml><htmlla......
  • web 第一章对于html总结
    1.2.2渲染引擎(了解)渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分浏览器出品的公司不同,内在的揎染引也是不同的:浏览器内核不一样,渲染方式就会不同怎么做到统一的打开页面解决就是要有一个相同的web标准1.3.2Web标准的构成Web标准中分成三个构成:构成语言说明......
  • <datalist>大多数浏览器不支持,用html.css 自己实现<datalist>功能
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>CustomDropdown</title><styl......
  • WebUI测试-获取html页面表格数据并存到Excel中
    fromselenium.webdriver.supportimportexpected_conditionsasECimportpandasaspdtable=WebDriverWait(driver,10).until(EC.presence_of_element_located((By.CSS_SELECTOR,'table')))#表格元素rows=table.find_elements(By.CSS_SELECTOR,"tbody......
  • HTML 链接和图片
    ​ 在HTML中,链接和图片是构建网页的基本元素之一,它们分别通过<a>标签和<img>标签来实现。详细文档:HTML链接和图片-CJavaPy链接(Anchor)链接,也称为锚点,允许用户点击跳转到另一个页面或页面内的某个部分。链接的基本语法如下:<ahref="url">链接文本</a>href属性指定链接目......