如果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. MySQL使用INSERT插入多条记录

    MySQL使用INSERT插入多条记录,应该如何操作呢?下面就为您详细介绍MySQL使用INSERT插入多条记录的实现方法,供您参考. 看到这个标题也许大家会问,这有什么好说的,调用多次INSERT语 ...

  2. Linux运维笔记--第四部

    第四部 3. Linux扩展正则表达式实战 扩展的正则表达式:ERE(主要用于egrep或grep  -E) +      重复一个或一个以上前面的字符. (*是0或多个) ?     重复0个或一个 ...

  3. (转发)IOS高级开发~Runtime(二)

    一些公用类: @interface ClassCustomClass :NSObject{ NSString *varTest1; NSString *varTest2; NSString *varT ...

  4. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  5. 【转】本人常用资源整理(ing...)

    Deep Learning(深度学习): ufldl的2个教程(这个没得说,入门绝对的好教程,Ng的,逻辑清晰有练习):一 ufldl的2个教程(这个没得说,入门绝对的好教程,Ng的,逻辑清晰有练习) ...

  6. 【动态规划】51nod1780 完美序列

    巧妙的转化:f前两维大小开反TLE了一发…… 如果一个序列的相邻两项差的绝对值小于等于1,那么我们说这个序列是完美的. 给出一个有序数列A,求有多少种完美序列排序后和数列A相同. Input 第一行一 ...

  7. SAP HANA

    DROP PROCEDURE ""."ZCONCAT_EKKO_EBN"; CREATE PROCEDURE ""."ZCONCA ...

  8. 机器学习(一)之KNN算法

    knn算法原理 ①.计算机将计算所有的点和该点的距离 ②.选出最近的k个点 ③.比较在选择的几个点中那个类的个数多就将该点分到那个类中 KNN算法的特点: knn算法的优点:精度高,对异常值不敏感,无 ...

  9. DeepFaceLab: SSE,AVX, OpenCL 等版本说明!

    Deep Fake Lab早期只有两个版本,一个是专门正对NVIDIA显卡的CUDA9的版本,另一个是支持CPU的版本. 三月初该项目作者对tenserFlow,Cuda的版本进行了升级,预编译的软件 ...

  10. selenium2-框架思想介绍

    为什么要有框架? 可维护性 提高编写脚本效率 提高脚本的可读性 框架的几大要素: 1. driver管理 2. 脚本 3. 数据 4. 元素对象 5. Log 6. 报告 7. 运行机制 8. 失败用 ...