如果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节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。的更多相关文章

  1. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  2. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  3. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  4. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  5. Hadoop学习笔记—13.分布式集群中节点的动态添加与下架

    开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与 ...

  6. Hadoop DataNode 节点的动态添加和动态删除

    动态添加 DataNode 节点 hadoop环境是必须的 需要加入新的 DataNode 节点,前提是已经配置好 SSH 无密登录:直接复制已有DataNode中.ssh目录中的authorized ...

  7. Hyperledger Fabric节点的动态添加和删除

    前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织.本文将在其基础上,详细介绍了如何在 soft 组织上添加新的 peer2 节点,并 ...

  8. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  9. jQuery动态创建的dom对象不能绑定事件的解决方法

    参照网上前辈: 方法一:绑定live事件 live(type,[data],fn) $(selector).live("click",function(){ alert(" ...

随机推荐

  1. PAT 乙级 1086

    题目 题目地址:PAT 乙级 1086 思路 本题比较简单,但还是存在小小的坑点,简单说一下: 倒置中需要注意的唯一问题就是:100倒置后不是001,而是1:这个问题处理之后还要注意另一个点就是,10 ...

  2. pandas的数据联级

    一.索引的堆(stack) 1.行列的转化: Stack():列转行 Unstack():行转列 Stack对应行, 使用小技巧:使用stack()的时候,level等于哪一个,哪一个就消失,出现在行 ...

  3. MHA

    MHA 1. MHA简介 1.1 MHA工作原理总结为如下 1.2 MHA工具包介绍 2. 部署MHA 2.1 环境介绍 2.2 一主两从复制搭建 2.3 配置互信 2.4 下载MHA 2.5 安装M ...

  4. C#基础-字符串

    字符串比较,strA.CompareTo(strB) A大于B 正数 A小于B 负数 A等于B 0 string strA = "ab"; string strB = " ...

  5. Linux:FTP服务匿名用户,本地用户,虚拟用户配置

    匿名用户  FTP协议占用两个端口号: 21端口:命令控制,用于接收客户端执行的FTP命令. 20端口:数据传输,用于上传.下载文件数据. 实验:匿名访问,服务器192.168.10.10    客户 ...

  6. 科学计算库Numpy——numpy.ndarray

    创建ndarray 元素类型 对于ndarray结构来说,里面所有的元素必须是同一类型的,如果不是的话,会自动的向下进行转换. 元素类型所占字节数 数组维数 元素个数 数组的维度 数组中填充固定值 索 ...

  7. Python开发环境与开发软件的安装

    Python开发的必要因素: 开发软件:PyCharm 社区版 PyCharm安装过程: 首先去官网下载:(链接为:  https://www.jetbrains.com/pycharm/downlo ...

  8. Python中关于函数的介绍

    一.什么是函数       当我们在日常工作中编写代码时,有没有发现这种情况,写了一套代码,却发现里面有很多段代码出现了有规律的重复,这样就不符合一个合格程序员的标准了,一个合格的程序员编写的代码最重 ...

  9. Thonny -- 简洁的 python 轻量级 IDE

    Thonny目前是 树莓派 上 默认的 Python 开发环境. 该 IDE 是 Institute of Computer Science of University of Tartu (爱沙尼亚 ...

  10. Oracle redo与undo 第一弹

      一. 什么是redo(用于前滚数据) redo也就是重做日志文件(redo log file),Oracle维护着两类重做日志文件:在线(online)重做日志文件和归档(archived)重做日 ...