事件委托小demo(原生版)

【事件委托小demo(原生版)】的更多相关文章

事件委托小demo(原生版)

事件委托小demo(jq版)

JavaScript之事件委托（附原生js和jQuery代码）

事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite…

hadoop streaming编程小demo(python版)

大数据团队搞数据质量评测.自动化质检和监控平台是用django,MR也是通过python实现的.(后来发现有orc压缩问题,python不知道怎么解决,正在改成java版本) 这里展示一个python编写MR的例子吧. 抄一句话:Hadoop Streaming是Hadoop提供的一个编程工具,它允许用户使用任何可执行文件或者脚本文件作为Mapper和Reducer. 1.首先,先介绍一下背景,我们的数据是存放在hive里的.hive建表语句如下: 我们将会解析元数据,和HDFS上的数据进行me…

关于js中的事件委托小案例

需求:页面上有一个按钮,和一个空的ul,要求点击按钮,会给ul中动态添加li元素,然后,点击动态添加的元素,在控制台上输出,这是第几个元素 <ul> </ul> <button>点击增加</button> var ul = document.querySelector('ul'); var btn = document.querySelector('button'); //动态添加元素 btn.addEventListener('click',functio…

js存款计算器原生小demo

大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心,静下气,顺便来指点我的小demo,嘿嘿,不多说了,直接上图吧! 这是最终的效果图(支持ie8以上的浏览器,此效果图是谷歌浏览器下展示的),输入不同的金额.时间(可选项为3月,6月,9月,12月).利率(可选项为5%,6%),点击计算后,最终在计算结果下,得出应得利息与总额. 下面为js原生代码下图…

原生js事件委托（事件代理）方法扩展

原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param sub {string}: 子节点选择器,如'.sub-item' * @param fn {function}: 事件回调方法 * @eg var ctn = document.querySelector('#menu_container'); * ctn.delegate('click','.…

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用处理时间占用内存, 而且不是每个事件都会被点击执行. 由此事件委托可以优化事件绑定行为.. 事件逐层冒泡直到被父级元素捕获. 事件代理给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件. DOM 标准事件三个阶段: 捕获到达目标. 冒泡 IE 不支持捕获, 但冒泡够用了. event.currentTarget 事件处理程序当前正在处理事件的那个元素 event.target 事件…

原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g…

e.target与事件委托简例（原生和jQuery的区别）

target定义(英译:目标,目的): target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法: event.target event.target.nodeName //获取事件触发元素标签name(li,p...) event.target.id //获取事件触发元素id event.target.className //获取事件触发元素classname event.target.innerHTML //获取事件触发元素的内容(li) 等...…