惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
博客园 - 【当耐特】
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Recent Announcements
Recent Announcements
D
Docker
GbyAI
GbyAI
酷 壳 – CoolShell
酷 壳 – CoolShell
WordPress大学
WordPress大学
The Cloudflare Blog
雷峰网
雷峰网
A
About on SuperTechFans
小众软件
小众软件
博客园 - Franky
博客园 - 聂微东
F
Full Disclosure
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
MongoDB | Blog
MongoDB | Blog
G
Google Developers Blog
Microsoft Azure Blog
Microsoft Azure Blog
U
Unit 42
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
V2EX
Engineering at Meta
Engineering at Meta
宝玉的分享
宝玉的分享
aimingoo的专栏
aimingoo的专栏
量子位
P
Proofpoint News Feed
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
罗磊的独立博客
Martin Fowler
Martin Fowler
D
DataBreaches.Net
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
S
Secure Thoughts
Project Zero
Project Zero
L
LangChain Blog
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
T
Tailwind CSS Blog
S
Schneier on Security
Blog — PlanetScale
Blog — PlanetScale
The Hacker News
The Hacker News
Spread Privacy
Spread Privacy
Security Latest
Security Latest
NISL@THU
NISL@THU
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
C
CXSECURITY Database RSS Feed - CXSecurity.com
J
Java Code Geeks

博客园 - HorseShoe2016

Ethereum 学习笔记 ---- Solidity 数据位置(Calldata, Memory, Storage)编码与布局全解析 vscode 禁用警告提示音 浏览器加载 HTML 页面并执行 Javascript 的流程图 Ethereum学习笔记 ---- 多重继承中的 C3线性化算法 Ethereum学习笔记 ---- 使用 Remix 调试功能理解 bytes 在 memory 中的布局 Ethereum学习笔记 ---- 通过 Event 学习《合约ABI规范》 Javascript: Blob, File/FileReader, ArrayBuffer, ReadableStream, Response 转换方法 vscode 无法调试 golang testify suite 中的单个 test 的解决办法 纯js实现 vue 组件 与 vue 单文件组件对比 一个简单的 indexedDB 应用示例 vue3 defineComponent: 使用纯 Javascript 定义组件 vue3 动态编译组件失败:Component provided template option but runtime compilation is not supported in this build of Vue Javascript Object 中,isExtensible/isSealed/isFrozen 的对比 mini-vue: 响应式数据的实现 手写Promise vscode vue 插件与 emmet、tailwind css 插件冲突的解决方案 Python 安装依赖包,出现 ssl.SSLCertVerificationError 的问题,解决方法 CentOS7 源码编译安装 Python 3.8.10,开启 SSL 功能 Protocol Buffer Go (proto3) - macos 搭建 protocol buffer 环境 + Encoding 实验
html 元素的 onEvent 与 addEventListener
HorseShoe2016 · 2024-04-09 · via 博客园 - HorseShoe2016

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

<div onEvent="handler">

还是添加

<div onEvent="handler()">

下面三个等价的 input 标签说明了正确的方法:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Listener</title>
  </head>
    <input type="file" id="myFile"  name="file1" />
    <input type="file" onchange="showFile(this)" name="file2" />
    <input type="file" onchange="handler(event)" name="file3" />

    <script>
      // 可以直接通过 id 字符串引用元素
      myFile.addEventListener('change', handler)

      function handler(event) {
        showFile(event.target) 
      }
      function showFile(input) {
        let file = input.files[0]
        let str =
          `input.name: ${input.name}\n` +
          `File name: ${file.name}\n` + // 例如 my.png
          `Last modified: ${file.lastModified}\n` // 例如 1552830408824
        alert(str)
      }
    </script>
  </body>
</html>

即我们应当添加

<div onEvent="handler(event)"> // 如果要接收事件,参数必须写成 event

posted on 2024-04-09 14:39  HorseShoe2016  阅读(78)  评论()    收藏  举报