首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

准确获取事件源的任意元素(事件委托)

事件委托的特殊用法 问题回顾 当我们想给一个列表中的每个列表项添加相同的事件时,我相信最先想到的方法一定是事件委托,通过将事件监听器设置在其父节点上,利用事件冒泡的原理实现想要的操作,这样只进行了一次的...通常我们都会使用事件源e.target来获取点击的元素,从而可以知道我们点击的是谁。...需要实现的功能是,点击这个盒子区域,输出对应的li对应的id,下面是这个li对应的代码片段,很显然在li内部存在着大量的子元素,我们需要通过给li的元素ul绑定事件,从而实现事件委托,那么我们该如何确定我们点击的元素属于哪一个...e.target不能直接的获取到我们想要的li了,从而导致我们获取不到id无从下手 解决方法 下面我通过另一种方法很好的解决了这个问题 在我们的事件对象event中,存在着一个方法path,这个方法可以返回事件触发的所有元素...,整个方法的核心就是通过获取到触发事件元素的所有元素集合,再通过筛选从而获得元素!

2.6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js事件循环机制和优先

    浏览器的渲染进程是多线程,包括 GUI渲染线程 js引擎线程 事件触发线程 定时器触发线程 异步http请求线程 主执行栈和任务队列 所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务...宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。...microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境) 它们的执行顺序如下: 在事件循环中,每进行一次循环操作称为...,立即执行当前微任务队列中的所有微任务(依次执行) 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取) 宏任务与微任务的优先(...浏览器): macrotask(按优先顺序排列): script(你的全部JS代码,“同步代码”), setTimeout, setInterval, setImmediate, I/O,UI rendering

    1.4K20

    vue.js: 自定义事件之—— 子组件修改组件的值

    如何利用自定义的事件,在子组件中修改组件里边的值?...关键点记住:三个事件名字 步骤如下: 这里,相对本案例,组件定义为Second-module,对应的子组件是Three-module 第一步:你要想改动组件的值,你组件得先有值让你改吧!...他是一个使者,是链接子组件改动组件值的桥梁。 第八步:自定义事件来到组件中(秦王),找到和他同名的事件(也就是荆轲刺秦时,接待荆轲的秦国大臣本人了!...,他起着在组件中用于监听自定义事件的一个作用,时刻准备去火车站接荆轲然后宣荆轲觐见。。这个事件是绑定在 要求改动值的子组件 标签-燕国在秦国的大使馆 上的)。...自定义事件和他的对接人(同名事件)交接,同名事件执行早在这里准备好的另一个组件里边的函数A,并且把自定义事件从子组件中带来的参数转交接,给了这个函数A的$event(固定名字,不能改)参数。

    6K40

    Js 事件委托(事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...,那么我们就可以只对它的(如果只有一个)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到元素上,当点击子元素时,通过事件冒泡将事件传递到元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?

    11.4K30

    JS和JQuery获取当前元素的兄弟及等元素的方法

    parent() 或者 $("span").parent(".class") jQuery.parents(expr),类似于 jQuery.parents(expr) ,但是是查找所有祖先元素,不限于元素...对象集合中筛选出一部分,而 jQuery.find(),的返回结果,不会有初始集合中的内容,比如 $("p").find("span") ,是从 元素开始找 ,等同于 $("p span") JS...获取: var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的节点 var ns=s.nextSibling;   /...获取节点,子元素:JS的方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素:空的text元素,目前IE也是这样       原生的JS获取ID为test的元素下的子元素。

    12.6K10

    js动画事件_JavaScript事件

    js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...this.innerHTML="动画正在运行"; x.style.background="pink"; } function myanimationiterration() //动画再次运行触发,同样也是通过事件监听...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

    18.4K10

    JS事件

    DOM2事件规定的事件流包括三个阶段: + 事件捕获阶段 + 处于目标阶段 + 事件冒泡阶段 注意:warning::先捕获后冒泡,但是在目标节点上谁写在前面谁先执行。...DOM事件级别 ? DOM0:不是W3C规范。 DOM0事件具有极好的跨浏览器优势,会以最快的速度绑定。...console.log("hello"); } script> 复制代码 动态脚本: 通过在JS中选中某个节点,然后给节点添加onclick属性 "btn">按钮 var btn =...其中DOM1事件处理标准中并没有定义事件相关的内容,所以没有所谓的DOM1事件处理 DOM2:对DOM1增加了 样式表对象模型 DOM2定义了两个事件处理程序。...,但是如果这时候li是动态渲染的,数据又特别大的时候,每次渲染后(有新增的情况)我们还需要重新来绑定,又繁琐又耗性能;这时候我们可以将绑定事件委托到li的元素,即ul。

    8.3K20

    js鼠标事件

    页面加载事件(onload),鼠标双击事件(ondbclick) window.onload=function(){                 //绑定元素,执行对应事件 鼠标双击(ondblclick...)                 //鼠标双击事件ondblclick                 document.getElementById('d2').ondblclick=function...(摁下后,鼠标回弹才执行)             window.onload=function(){                 //绑定元素,执行鼠标抬起事件   鼠标抬起(onmouseup)...                    alert('鼠标移出操作');                 }             } PS:鼠标移动(onmousemove)和鼠标移入(onmouseover)区别:移动事件指鼠标只要移动就产生事件...,移入事件需要移入到指定的对象内才执行事件

    18.2K40
    领券