如果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(" ...
随机推荐
- Tomcat详细安装配置
1.首先是Tomcat的获取和安装. 获取当然得上Apache的官方网站下载,开源免费,而且带宽也足够.下载会很快. 这是两种不同的下载,一个是普通安装版本,一个是解压安装版本.使用起来是一样的,只是 ...
- 关于flyme5显示不到和卸载不到旧应用解决方法
笔者买入一台mx5,升级flyme5后旧应用没有显示出来,而且在设置的应用管理都没显示旧应用. 通过adb命令: adb shell pm list packages显示所有包名, 查看自己要删除应用 ...
- javascript原生方法集锦
1.sort方法sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码顺序排 ...
- 【思维题 kmp 构造】bzoj4974: [Lydsy1708月赛]字符串大师
字符串思博题这一块还是有点薄弱啊. Description 一个串T是S的循环节,当且仅当存在正整数k,使得S是T^k(即T重复k次)的前缀,比如abcd是abcdabcdab的循环节 .给定一个长度 ...
- MyBatis逆向工程中的Mapper接口以及Example的实例函数及详解
一.mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserExample example) thorws SQLException ...
- Python爬虫系列-BeautifulSoup详解
安装 pip3 install beautifulsoup4 解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(markup,'html,parser') Pyth ...
- 【Ubuntu】ubuntu基本操作命令
本文主要是用于记录ubuntu中会使用到的命令,但是有不是特别常用的,用于自己后续查阅使用. 1.查询ubuntu版本信息 方法一: cat /etc/issue 方法二: sudo lsb_rele ...
- Python基础——模块与包
在Python中,可以用import导入需要的模块.包.库.文件等. 把工作路径导入系统路径 import os#os是工作台 import sys#sys是系统 sys.path.append(os ...
- Nordic Collegiate Programming Contest 2015 G. Goblin Garden Guards
In an unprecedented turn of events, goblins recently launched an invasion against the Nedewsian city ...
- 有限状态机(FSM)的设计与实现
有限状态机(FSM)是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常FSM包含几个要素:状态的管理.状态的监控.状态的触发.状态触发后引发的动作.本文主要 ...