事件委托获取了子元素

2024-10-30

js 事件委托获取子元素下标

html:部分 <ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> </ul> js部分: var li=$("li");$("ul:eq(0)").click(function(e){ var e = e || window.event; target = e.target || e.

参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynnE0nz4hBC6e5CrwaOfwLfata 参考: http://blog.sina.com.cn/s/blog_7718755501019kg5.html 实现方法:使用遍历函数children(),关键代码为 $(this).children("li"),表示获取当前元素下所有标签

JQuery this和$(this)的区别及获取$(this)子元素对象的方法

1.JQuery this和$(this)的区别相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象.那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了. 那么,我们

div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。

先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce-leftBox"> //左边的内容 </div> <div class="ce-rightBox"> //右边的内容 </div> </div> 2.css .ce-container { background: white

转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法

1.JQuery this和$(this)的区别相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象. 那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了. 那么,我

html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript"> function onLoads(){ document.getElementById("div1").addEventListener("click",(e) => { alert('1'); }, true); document.getElemen

mouseover和mouseout事件在鼠标经过子元素时也会触发

JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效暂时解决办法是,别让绑定事件的元素靠浏览器边

VUE中v-on:click事件中获取当前dom元素

在开发中总是忘记, 特意在此记录关键字: $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 }

JQuery中的事件委托

JQuery 中的事件委托定义事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥有相同的操作.可以理解为生命一个全局标量,所有的子元素,都要执行我声明父元素的参数. 事件与事件委托代码对比事件 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charse

Javascript事件模型（二）：Javascript事件的父元素和子元素

DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. 冒泡事件流当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件.在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调

js 下获取子元素的方法

笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便. 咱今天在使用原生js的时候,就遇见一个坑------>firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!! 这个是一个小模型: <div> &l

jquery选择器之获取父级元素，子元素，同级元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="style/css.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js"></script>

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(

关于事件委托和时间冒泡（以及apply和call的事项）

搜索事件委托和事件冒泡,网上一大堆乱七八糟的解释,当然意思都对,没毛病. but,真的无聊. 事件冒泡:事件会从点击的元素开始依次向上流出,直到html,遇见事件监听则执行. 事件委托:原因——父元素下有若干不定子元素需要添加相同监听事件.处理方法——利用事件冒泡性质给父元素加监听事件,再用e.target获取被点击的子元素,即事件源. 然后说到事件委托就要谈到apply和call方法了. apply方法,网上也有一大把解释,老样子,我还是喜欢简单点的. 1.所谓apply就是改变当前对象的th

对JS中事件委托的理解

什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件. 事件委托的好处: 事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能.

关于js事件委托

由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序. 在创建 GUI 的语言(如 C#)中,为 GUI 中的每个按钮添加一个 onclick 事件处理程序是司空见惯的事,而且这样做也不会导致什么问题. 可是在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方面的.首先,每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差.其次,必须事先指定所有事件处理程

js事件冒泡和事件委托

js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <

JQuery的事件委托；jQuery注册事件；jQuery事件解绑

一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的事件不会有事件. ③使用方法:$("span").on("click",function(){alert("这是一个简单事件");}): $("div").on("click", "span"

js 利用事件委托解决mousedown中的click

有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href="javascript:void(0);">点我</a> </div> 搜了很多相关的都没有解决办法,于是我想到了事件委托,在父元素被mousedown的时候,event对象里包含了很多有用的东西.其中target就是关键! 代码: //原生js走起 const n

js事件委托代码优化【感悟总结】

前两天接手了同事的一个项目,是一个网站首页,其中有段代码很累赘,要实现的功能就是, 通过给父元素添加鼠标移入移出事件,来控制子元素显示隐藏. html代码,一共有四个父元素div,每个父元素嵌套一个子元素div, 这是截取了其中一个div: 最简单粗暴的方法莫过于这样: 直接写八个方法,分别设置属性的样式block或者none. 这样写虽然简单,但是出于代码优化,页面响应速度的关系,我们还是需要改动的. 问了问同事,说看看有关事件委托的相关方法,能有效解决这个问题. 经过一顿操作之后,楼主写出了