如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题。比较结实。示例代码如下
<ul id="tit">
<li>1a</li>
<li>2a</li>
<li>3a</li>
<li>4a</li>
<li>5a</li>
<li>6a</li>
<li>7a</li>
<li>8a</li>
<li>9a</li>
<li>10a</li>
</ul>
var tit = document.getElementById("tit");
tit.onclick = function(e){
var e = e || window.event;
var tar = e.target || e.srcElement;
if(tar.nodeName.toLowerCase() === 'li'){
tar.style.background = 'green';
}
}
var li = document.createElement('li');
li.innerHTML = "哈哈哈哈";
tit.appendChild(li);
这个主要是没有jquery 的场景 jquery可以用on方法
如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。的更多相关文章
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- Hadoop学习笔记—13.分布式集群中节点的动态添加与下架
开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与 ...
- Hadoop DataNode 节点的动态添加和动态删除
动态添加 DataNode 节点 hadoop环境是必须的 需要加入新的 DataNode 节点,前提是已经配置好 SSH 无密登录:直接复制已有DataNode中.ssh目录中的authorized ...
- Hyperledger Fabric节点的动态添加和删除
前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织.本文将在其基础上,详细介绍了如何在 soft 组织上添加新的 peer2 节点,并 ...
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...
- jQuery动态创建的dom对象不能绑定事件的解决方法
参照网上前辈: 方法一:绑定live事件 live(type,[data],fn) $(selector).live("click",function(){ alert(" ...
随机推荐
- Flask-数据与路由
数据 图书数据库的地址 # 基地址 http://t.yushu.im # 关键字搜索 http://t.yushu.im/v2/book/search?q={}&start={}&c ...
- 06grep与find命令详解
1. grep 命令 grep 命令用于在文本中执行关键词搜索,并显示匹配的结果,格式为"grep [选项][文件]". grep 命令的参数及其作用如下: -b 将可执行文件(b ...
- 【网络基础】【TCP/IP】IP的分级
节选自 <鸟哥的linux私房菜> http://cn.linux.vbird.org/linux_server/0110network_basic_3.php#ps12 InterNI ...
- 用session模拟登陆,手动输入验证码
# 本练习是模拟登陆及验证码处理(把验证码下载到本地后手动输入) # 1 通过分析页面获得form表单的登陆接口为 action="https://www.douban.com/accoun ...
- UVA - 11134 Fabled Rooks问题分解,贪心
题目:点击打开题目链接 思路:为了满足所有的车不能相互攻击,就要保证所有的车不同行不同列,于是可以发现,行与列是无关的,因此题目可以拆解为两个一维问题,即在区间[1-n]之间选择n个不同的整数,使得第 ...
- POJ:3160-Father Christmas flymouse
Father Christmas flymouse Time Limit: 1000MS Memory Limit: 131072K Description After retirement as c ...
- 【原创】关于高版本poi autoSizeColumn方法异常的情况
之前使用的3.9版本,autoSizeColumn方法一切正常,现在切换到了3.15版本这个方法就出先了问题,问题如下,无法自动追踪所有的列. Exception in thread "ma ...
- Linux学习-软件管理员简介
Linux 界的两大主流: RPM 与 DPKG 目前在 Linux 界软件安装方式最常见的有两种,分别是: dpkg: 这个机制最早是由 Debian Linux 社群所开发出来的,透过 dpkg ...
- Linuxx学习-特殊文件与进程
具有 SUID/SGID 权限的指令执行状态 SUID 的权限其实与进程的相关性非常的大!为什么呢?先来看看 SUID 的程序是如何被一般用户 执行,且具有什么特色呢? SUID 权限仅对二进制程序( ...
- Python之多线程与多进程(二)
多进程 上一章:Python多线程与多进程(一) 由于GIL的存在,Python的多线程并没有实现真正的并行.因此,一些问题使用threading模块并不能解决 不过Python为并行提供了一个替代方 ...