day28-30 关于addEventListener

最新推荐文章于 2024-08-18 20:46:38 发布
最新推荐文章于 2024-08-18 20:46:38 发布
阅读量86 收藏
点赞数
分类专栏： 初学前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/realrecall/article/details/110849487
版权

有的事件要用addEventListener添加，比如keypress。如果用.keypress可能不行。

RealRecall
关注
专栏目录
HTML-JavaScript-onclick与addEventlistener的使用以及优缺点
星河灿烂的博客
04-02 1461
2018.04.2********************************Day02******************************** author：wills 在html的具有交互功能的标签，比如button标签，或者type为botton的input的标签，它们都可以绑定属性，onclick，当这个按钮被点击时就触发事件。下面是一个简单的网页上添加内容的html文档代...
JavaScript30-day10-holdShiftToCheckBoxes:＃JavaScript30
04-15
在JavaScript30系列教程中，"JavaScript30-day10-holdShiftToCheckBoxes"是一个专注于利用JavaScript增强HTML复选框交互性的项目。这个项目教你如何实现一个功能，让用户在按住Shift键的同时通过鼠标点击来多选复选...
HTML DOM 事件
akuibpt23191的博客
07-13 608
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
day30-事件（上）
HAI6545的博客
12-27 297
事件复习 事件三要素：事件源 + 事件名称 + 事件处理程序 事件源 : 谁触发这个事件 (按钮 btn) 事件名称 : 触发了什么事件 (点击click事件) 事件处理程序 : 事件触发后要执行的代码(函数形式)----可以是有名字的函数，要不要加小括号？不加 事件类型 在事件对象中有个一个属性 type 可以获取到当前事件的类型。 window.onload = function(e){ var ev = e || window.event; console.log(e
Day28 - Video Speed Controller
孔壹学院
08-14 1281
本文出自：春哥个人博客：http://www.liyuechun.org 作者：©黎跃春-追时间的人 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2
JavaScript 30 Day -- 14 LocalStorage
吃桑果的柯基
12-28 142
实现效果：使网页模拟菜单的效果，在页面中添加新的菜品，而且在页面刷新之后也不清空。 关键点：Event event.preventDefault //阻止默认行 eventTarget.addEventListener //事件监听 localStorage localStorage.setItem() //储存在浏览器上 localStorage.getItem
03 day3--javascript笔记pink老师-- 进阶之DOM技术
小女不才
08-31 1284
1. Web API 1.1 Web APIs与JS基础关联性 1.1.1 js的组成 1.1.2JS基础阶段与Web APls阶段 JS基础阶段： 我们学习的是ECMAscript标准规定的基本语法 要求同学们掌握Js基础语法 只学习基本语法,做不了常用的网页交互效果 目的是为了Js后面的课程打基础、做铺垫 Web APls阶段： web APIs是w3c组织的标准 web APIs 我们主要学习DoM和BOM web APIs 是我们Js 所独有的部分 我们主要学习页面交互功能 需要使用Js 基
# day03 - Web APIs
weixin_60651472的博客
04-21 230
> 学习目标： > > 能够使用removeChild()方法删除节点 > > 能够完成动态生成表格案例 > > 能够使用传统方式和监听方式给元素注册事件 > > 能够说出事件流执行的三个阶段 > > 能够在事件处理函数中获取事件对象 > > 能够使用事件对象取消默认行为 > > 能够使用事件对象阻止事件冒泡 > > 能够使用事件对象获取鼠标的位置 > > 能
Day03-Redux
最新发布
qq_40884528的博客
08-18 728
Redux是React最常用的集中状态管理工具，类似于Vue中的Vuex，可以独立于框架运行。作用：通过集中管理的方式管理应用的状态。为什么要使用Redux？独立于组件，无视组件之间的层级关系，简化通信问题单项数据流清晰，易于定位bug调试工具配套良好，方便调试。
day04 - Web APIs
weixin_46575696的博客
03-17 247
day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用histo...
day5-html-css-js
05-10
3. **事件处理**：理解和使用事件监听器（`addEventListener`）及事件触发（如`click`, `mouseover`, `submit`等），实现用户交互。 4. **AJAX**：异步JavaScript和XML，用于在不刷新整个页面的情况下从服务器获取...
dayand-night-tower-siege
04-10
开发者可能会用到addEventListener方法来捕捉用户的输入，并执行相应的功能。 8. **动画和帧率控制**：JavaScript能够实现游戏的动画效果，比如小鸟飞行、塔楼倒塌等。通过设置定时器和帧率，确保游戏流畅且性能...
day16-Drink Water（喝水）
07-10
在本项目"day16-Drink Water（喝水）"中，我们主要探讨的是利用HTML、CSS和JavaScript技术来创建一个互动式的喝水提醒应用。这个应用旨在帮助用户养成定时喝水的好习惯，通过网页的形式呈现，使得提醒更加直观和方便...
day01-Expanding Cards（扩展卡-手风琴）
06-28
header.addEventListener('click', function() { const content = document.getElementById(this.id.replace('Header', 'Content')); if (content.style.display === 'none') { content.style.display = 'block'...
复习一下HTML和CSS
RealRecall的博客
11-01 855
html和css还差最后一个作业，做倒数第二个作业用了太长时间，我对于知识掌握不牢。我今天开始复习了day1到day8的自学内容。 时间有限，只复习了选择器，列表。
day31-33阻止默认事件的方法
RealRecall的博客
12-14 463
代码如下： var input = document.querySelector("input"); input.onclick = function (e) { if (input.checked == false) { e.preventDefault(); } }; 这样的话，checkbox就无法取消了。因为当checked的值想要变成false时，input的默认事件，即“改变checkbox的状态”这个默认
day25-27 递归和setTimeout
RealRecall的博客
12-05 425
递归 程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。 使用setTime
day34-36 一种使用innerHTML增加内容的方法
RealRecall的博客
12-17 393
代码如下： outerHTML这个属性和innerHTML差不多，前者还额外设置（或获取）对象的标签。
用于展示患者的就诊记录。每一条就诊记录需要展示就诊日期、医生姓名、诊断结果和处方信息。用户可以通过输入关键字进行搜索，搜索结果将实时展示在表格中。点击详情可以弹出一个弹窗组件，展示基本信息。 <img src="images/day04-homework1.gif" /> 需求： 1. 实现搜索框根据关键词 查询出对应的数据 2. 封装一个表格组件，组件里边人记录，根据父组件传递过来的数组展示 3. 封装一个详情组件 4. 点击详情的时候，可以打开弹窗组件，并且展示用户的信息 5. 点击X关闭弹窗 组件
05-25
实现这个需求可以采用以下步骤： 1. 创建一个包含就诊日期、医生姓名、诊断结果和处方信息的数据数组。 2. 创建一个搜索框组件，当用户输入关键字时，使用 JavaScript 的 filter() 方法过滤出包含该关键字的数据。 3. 创建一个表格组件，接收父组件传递的数据数组并展示在表格中。 4. 创建一个详情组件，当用户点击某条记录的详情按钮时，弹出弹窗组件并将该条记录的数据传递给详情组件展示。 5. 创建一个弹窗组件，展示传递给它的数据，并在点击关闭按钮时关闭弹窗。 下面是一个代码示例： ```vue <!-- SearchBox.vue 搜索框组件 --> <template> <div> <input type="text" v-model="keyword" @input="search" placeholder="输入关键字搜索"> </div> </template> <script> export default { data() { return { keyword: '' // 用户输入的关键字 } }, methods: { search() { // 过滤出包含关键字的数据 this.$emit('search', this.keyword) } } } </script> <!-- DataTable.vue 表格组件 --> <template> <table> <thead> <tr> <th>就诊日期</th> <th>医生姓名</th> <th>诊断结果</th> <th>处方信息</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="record in filteredRecords" :key="record.id"> <td>{{ record.date }}</td> <td>{{ record.doctor }}</td> <td>{{ record.diagnosis }}</td> <td>{{ record.prescription }}</td> <td> <button @click="showDetails(record)">详情</button> </td> </tr> </tbody> </table> </template> <script> export default { props: ['records'], data() { return { filteredRecords: this.records // 初始展示所有记录 } }, methods: { showDetails(record) { // 显示详情弹窗 this.$emit('show-details', record) } }, watch: { records(newVal) { // 数据数组更新时同时更新过滤后的数据 this.filteredRecords = newVal } } } </script> <!-- Details.vue 详情组件 --> <template> <div class="details"> <h2>就诊日期：{{ record.date }}</h2> <p>医生姓名：{{ record.doctor }}</p> <p>诊断结果：{{ record.diagnosis }}</p> <p>处方信息：{{ record.prescription }}</p> <button @click="$emit('close')">关闭</button> </div> </template> <script> export default { props: ['record'] } </script> <!-- Popup.vue 弹窗组件 --> <template> <div class="popup"> <div class="overlay"></div> <div class="content"> <slot></slot> </div> </div> </template> <script> export default { mounted() { // 在组件挂载后，监听 ESC 键按下事件 // 按下 ESC 键时关闭弹窗 window.addEventListener('keydown', this.closeOnEsc) }, beforeDestroy() { // 在组件销毁前，解除 ESC 键按下事件的监听 window.removeEventListener('keydown', this.closeOnEsc) }, methods: { closeOnEsc(event) { if (event.keyCode === 27) { this.$emit('close') } } } } </script> <!-- App.vue 父组件 --> <template> <div> <SearchBox @search="filterRecords"></SearchBox> <DataTable :records="filteredRecords" @show-details="showDetails"></DataTable> <Popup v-if="showPopup" @close="closePopup"> <Details :record="selectedRecord"></Details> </Popup> </div> </template> <script> import SearchBox from './SearchBox.vue' import DataTable from './DataTable.vue' import Popup from './Popup.vue' import Details from './Details.vue' export default { components: { SearchBox, DataTable, Popup, Details }, data() { return { records: [ { id: 1, date: '2021-01-01', doctor: '张医生', diagnosis: '感冒', prescription: '感冒药' }, { id: 2, date: '2021-02-01', doctor: '李医生', diagnosis: '发烧', prescription: '退烧药' }, { id: 3, date: '2021-03-01', doctor: '王医生', diagnosis: '胃炎', prescription: '胃药' } ], filteredRecords: [], // 搜索后的数据 selectedRecord: null, // 当前选中的记录 showPopup: false // 是否显示弹窗 } }, methods: { filterRecords(keyword) { // 根据关键字过滤数据 this.filteredRecords = this.records.filter(record => { return record.doctor.includes(keyword) || record.diagnosis.includes(keyword) || record.prescription.includes(keyword) }) }, showDetails(record) { // 显示详情弹窗 this.selectedRecord = record this.showPopup = true }, closePopup() { // 关闭弹窗 this.showPopup = false } } } </script> ``` 这样就实现了一个简单的就诊记录展示系统，包含搜索、表格、详情、弹窗等多个组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值