html 元素的 onEvent 与 addEventListener

博客园 - 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 实验

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) 评论() 收藏举报

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - HorseShoe2016