js委托事件-addEventListeners（冒泡方向）
JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。
实例：
给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="div">
- <p>11111</p>
- <p>2222</p>
- </div>
- <button id="btn">xxxx</button>
- <script>
- document.getElementById("div").addEventListener("click",function(e){
- if(e.target.nodeName=="P"){
- alert("xxx")
- }
- })
- document.getElementById("xx").onclick=function(){
- var p = document.createElement("p");
- p.innerHTML="333";
- document.getElementById("btn").appendChild(p);
- }
- </script>
- </body>
- </html>
冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡
在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡
当我们设置为true的时候就会由父元素向下冒泡
实例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
- <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
- </div>
- <script>
- document.getElementById("id1").addEventListener('click',function(){
- console.log("id1");
- },true)
- document.getElementById("id2").addEventListener('click',function(){
- console.log("id2");
- },true)
- </script>
- </body>
- </html>
js委托事件-addEventListeners（冒泡方向）的更多相关文章
- js委托事件和代理事件
转载出处:https://www.cnblogs.com/liugang-vip/p/5616484.html js中的事件委托或是事件代理详解 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- JS中事件代理与委托
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- JS：事件委托
事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
随机推荐
- php多张图片打包下载
<?php /** * 图片打包下载 */ namespace app\common\extend; class Imagedown { var $datasec = array (); var ...
- AcWing 209. 装备购买 （高斯消元线性空间）打卡
脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量z[i]=(ai,1,ai,2,..,ai,m)z[i]=(ai,1,ai,2,..,ai,m) 表示,每个装备需要 ...
- 88、展示Tensorflow计算图上每个节点的基本信息以及运行时消耗的时间和空间
''' Created on May 24, 2017 @author: p0079482 ''' #使用程序输出日志 import tensorflow as tf with tf.Session( ...
- 用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 Jinja 中常用的过滤器 default float int len ...
- T1212：LETTERS
[题目描述] 给出一个R * S的大写字母矩阵,一开始的位置为左上角,你可以向上下左右四个方向移动,并且不能移向曾经经过的字母.问最多可以经过几个字母.roe× [输入] 第一行,输入字母矩阵行数R和 ...
- LightOJ 1248 Dice (III) (期望DP / 几何分布)
题目链接:LightOJ - 1248 Description Given a dice with n sides, you have to find the expected number of t ...
- POJ 3641 Pseudoprime numbers (数论+快速幂)
题目链接:POJ 3641 Description Fermat's theorem states that for any prime number p and for any integer a ...
- raid 10
首先先创建五个新的硬盘,步骤参照 raid 5 建好硬盘以后开启虚拟机 打开终端,更改好主机名以后,重新打开终端 输入命令:fdisk -l 查看有没有加入进来 我们发现已经加入进来 然后开始分 ...
- 判断是否英文字母或数字的C#正则表达式
private int IsDigitOrNumber(string str) { if(System.Text.RegularExpressions.Regex.IsMatch(str,@" ...
- flask中配置并使用mongodb
在你安装并运行了mongodb的情况下: 随便在一个文件中写入以下代码: import pymongo client = pymongo.MongoClient(host="localhos ...