一个事件委托的例子
时间:2020-07-11
本文章向大家介绍一个事件委托的例子,主要包括一个事件委托的例子使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML: container中有三个pane,点击按钮pane会消失
<div id="container"> <div class="pane"> <h3>Horse</h3> <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p> <button class="remove-button">[x]</button> </div> <div class="pane"> <h3>Donkey</h3> <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p> <button class="remove-button">[x]</button> </div> <div class="pane"> <h3>Cat</h3> <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin. </p> <button class="remove-button">[x]</button> </div> </div>
JS:
<script> container.onclick = function(event) { //如果目标元素不是按钮-直接返回,什么都不做 if (event.target.className != 'remove-button') return; //找到离按钮最近的pane let pane = event.target.closest('.pane'); pane.remove(); }; </script>
原文地址:https://www.cnblogs.com/LangZ-/p/13285214.html
- 【8】数据浏览表格的快速输出
- Silverlight的自定义tooltip提示工具条
- WritableBitmapEx 一瞥
- 2.认证小程序
- 【9】分页浏览的管理
- 温故而知新:silverlight中的图片资源绑定
- 页面状态保持机制(编辑中)
- mysql主从同步(5)-同步延迟状态考量(seconds_behind_master和pt-heartbea)
- ngx_pagespeed-nginx前端优化模块介绍
- Tomcat利用MSM实现Session共享方案解说
- Tomcat集群环境下session共享方案梳理(1)-通过memcached(MSM)方法实现
- nginx负载均衡(5种方式)、rewrite重写规则及多server反代配置梳理
- python常用知识梳理
- 如何打击“假货、高仿”类小程序
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法