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

事件高级

事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...冒泡阶段   我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),  这时候this指向的是父元素,因为它是绑定事件的元素对象...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理,在 jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。...事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。 事件委托的作用 我们只操作了一次 DOM ,提高了程序的性能。

1.2K10

前端系列第2集-如何让事件先冒泡后获取?

}   }); 在这个例子中,我们使用事件委托将单击事件监听器添加到列表元素上,并在事件处理程序中检查被单击的元素是否为按钮。...这个方法可以确保事件先冒泡后获取,因为我们将监听器添加到父元素上,而不是每个子元素上。 使用 setTimeout() 另一种方法是将事件处理程序延迟一小段时间再执行。...这个方法可以确保事件先冒泡后获取,因为事件处理程序在一小段时间后执行,以便事件有时间传播到父元素。...如果想要事件先冒泡后获取,可以使用以下两种方法之一: 使用事件委托(Event Delegation):将单个事件监听器添加到父元素上,以处理其子元素上的事件。...由于事件冒泡会在整个文档中传播,因此在父元素上添加事件监听器可以确保事件先冒泡后获取。 使用 setTimeout():将事件处理程序延迟一小段时间再执行,以确保事件有时间传播到父元素。

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

    第50次文章:JQuery基础

    如果操作的是元素的固有属性,则建议使用prop 如果操作的是元素自定义的属性,则建议使用attr (2) 对class属性操作 addClass():添加class属性值。...3、CRUD操作 1. append():父元素将子元素追加到末尾 * 对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 2. prepend():父元素将子元素追加到开头...* 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头 3. prependTo(): * 对象1.appendTo(对象2):将对象1添加到对象2元素内部,并且在末尾...4. prepend(): * 对象1.prependTo(对象2):将对象1添加到对象2元素内部,并且在开头 5. after():添加元素到元素后面 * 对象1.after(对象...对象1和对象2是兄弟关系 6. before():添加元素到元素前边 * 对象1.before(对象2):将对象2添加到对象1前边。

    1.6K30

    JavaWeb(八)JQuery

    事件一览: 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change...die() 移除所有通过 live() 函数添加的事件处理程序。...方法 描述 addClass() 向匹配的元素添加指定的类名。 after() 在匹配的元素之后插入内容。 append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。...insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。 prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。...prependTo() 向目标开头插入匹配元素集合中的每个元素。 remove() 移除所有匹配的元素。 removeAttr() 从所有匹配的元素中移除指定的属性。

    1.8K40

    JQuery的学习

    * 对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 2.prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2):将对象2添加到对象...1元素内部,并且在开头 3.appendTo():父元素将子元素追加到末尾 * 对象1.appendTo(对象2):将对象1添加到对象2元素内部,并且在末尾 4.prependTo():父元素将子元素追加到开头...* 对象1.prependTo(对象2):将对象1添加到对象2元素内部,并且在开头 5.after():添加元素到元素后边 * 对象1.after(对象2):将对象2添加到对象1后边。...两者是兄弟关系 6.before():添加元素到元素前边 * 对象1.before(对象2):将对象2添加到对象1前边。...两者是兄弟关系 7.insertAfter():添加元素到元素后边 * 对象1.insertAfter(对象2):将对象1添加到对象2后边。

    16.6K20

    事件高级

    事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ​...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: 咱们班有100个学生,快递员有100个快递, 如果一个个的送花费时间较长。

    1.5K41

    事件高级

    事件侦听注册事件 addEventListener   // (1) 里面的事件类型是字符串 必定加引号 而且不带on   // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)...DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ​...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?

    1.4K20

    如何在CentOS 7上使用InfluxDB分析系统指标

    collectd是一个收集,传输和存储性能数据的Unix守护程序。它有助于维护可用资源的概述,以检测现有或迫在眉睫的瓶颈。...在侧边菜单中,单击“ 数据源”。单击顶部标题中的“ 添加新链接”以显示数据源定义屏幕。 使用以下设置填充此屏幕: 名称:涌入 键入:从下拉菜单中选择InfluxDB 0.8.x....我们现在将使用显示元素填充仪表板,以创建可视系统概述信息散热器。 在仪表板中,单击行控制菜单,这是位于仪表板左上角的绿色小矩形。在此菜单中,将鼠标悬停在“ 添加面板”上,然后单击“ 图形”。...接下来,单击图表管理菜单底部的+添加查询。这将向查询构建器添加第二个查询行。...添加三个查询后,您的指标屏幕应如下所示: 最后,单击Back to Dashboard链接,将您带到仪表板,该仪表板现在包含显示系统网络趋势的图表,然后单击顶部标题中的软盘图标以保存新的显示图表和仪表板

    3.5K10

    原生 JS DOM 常用操作大全

    javaScript 程序中采用的是异步处理事件模型,事件处理分三部分。...事件源 (具体作用在哪 个元素或标签上)事件类型 (指的是 例如:鼠标的点击,双击,经过,键盘的按下的键)处理程序 ( 指的是 事件触发后浏览器调用对应的处理程序(以函数的形式),也称为事件处理函数)...包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件触发时系统会产生一个事件对象,并且系统会以实参的形式传给事件处理函数在事件处理程序中声明一个形参用来接收事件参数。 //1....别忘了e.通常情况下e.target 和 this 的指向是一致的 注意:有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行)这时候 this 指向的是元素...("类名") //是否包含此类名, 返回布尔值判断是否为存在 calssName 是保留字,因此使用 calssName 来操作元素类名属性 取消 a 标签的默认跳转 方法一: 在处理程序内的最后 添加

    10810

    WPF是什么_wpf documentviewer

    在我印象中Grid是网格式的,而List是列表式的,所以我很好奇两者为什么可以混到一起。当然从类的关系上来看,应该是两者都继承了一个共同的父类。...添加可视化元素到GridView 要在GridView视图中添加可视化元素,如CheckBox和Button控件,需使用模板或样式。...你还可以定义用户单击列标题时响应的事件处理程序。事件处理程序可以执行类似于根据列内容对显示在GridView中的数据进行排序的操作。...通过单击列标题按钮与列交互 当用户单击列标题按钮时,如果你提供了排序算法,则可以对列中显示的数据进行排序。 你可以自定义标题按钮的Click事件,以便提供排序算法之类的功能。...若要为单个列表头处理Click事件,需在GridViewColumnHeader上设置事件处理程序。若要为所有列表头设置处理Click事件的事件处理程序,可在ListView控件上设置该处理程序。

    4.7K20

    前端学习(52)~事件委托

    标签上的时候,需要获取此的相关信息并飘出悬浮窗以显示详细信息,或者当某个被点击的时候需要触发相应的处理事件。...我们希望,只绑定一次事件,即可应用到多个元素上,即使元素是后来添加的。 因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是 ul 上,然后在执行事件函数的时候再去匹配判断目标元素。...click 事件,当子节点被点击的时候,click事件会从子节点开始向父节点冒泡。...父节点捕获到事件之后,开始执行方法体里的内容:通过判断 event.target 拿到了被点击的子节点。从而可以获取到相应的信息,并作处理。...换而言之,参数为false,说明事件是在冒泡阶段触发(子元素向父元素传递事件)。而父节点注册了事件函数,子节点没有注册事件函数,此时,会在父节点中执行函数体里的代码。

    51610

    如何在CentOS 7上使用InfluxDB分析系统指标

    要添加数据源,请单击顶部标题中的Grafana图标打开侧边菜单。在侧边菜单中,单击“ 数据源”。单击顶部标题中的“ 添加新链接”以显示数据源定义屏幕。...在此步骤中,我们将创建一个系统概述仪表板,以显示我们在InfluxDB中收集的系统指标的趋势。 在Grafana中,仪表板是您工作的基本托盘。仪表板包含显示元素(例如图形和文本窗格)。...单击顶部标题中的“ 主页”链接以显示仪表板列表屏幕。在此屏幕的底部,单击+新建。这将带您进入新的空白仪表板。 单击仪表板标题菜单中的齿轮,然后单击“ 设置”。...我们现在将使用显示元素填充仪表板,以创建可视系统概述信息散热器。 在仪表板中,单击行控制菜单,这是位于仪表板左上角的绿色小矩形。在此菜单中,将鼠标悬停在“ 添加面板”上,然后单击“ 图形”。...接下来,单击图表管理菜单底部的+添加查询。这将向查询构建器添加第二个查询行。

    3.3K30

    HTML5 与CSS3 相关笔记

    设置标记如:这里是目标位置, 然后在A位置设置链接路径href属性值为”#标记名”如: (3)功能性链接:单击时启动本机自带的应用程序如...(3)定义列表,, 是标题及列表项的结合。...,且属性值=val(区分大小写)的A标签 (3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串 (4)A[arrt $= val] 选择包含属性arrt,且属性值以...(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。 (4)父级添加伪类after,推荐。...53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容) (1)opacity:x x值为0~1,值越小越透明 (2)filter:alpha(opacity=x) x值为0~100,值越小越透明

    5.4K30

    JQuery高级

    jQuery中定义变量的时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery的语法。 其实$是jQuery中的一个函数。...***事件冒泡 现象:父子级标签 触发子级的事件,这个事件会逐层向父级传递。 子集执行了某一事件,会逐层向上触发相同事件,直到被处理或者遇到return。...比如子级有单击事件,那么父级如果有单击事件也会被触发,父级的父级如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...,下面两种用法 ------完全等同delegate ------只找到将来发生事件的目标绑定on() 事件委托两个作用:1、提高了代码执行效率2、可以给未来元素绑定命令 通过程序追加的标签叫做未来元素...新增节点------- 步骤: 1、声明变量保存节点数据(名字一般为$开头,然后找的标签是什么就叫做什么) 2、使用追加函数将节点变量追加到指定位置 子级加: append(添加的内容) 向末尾加 appendTo

    1.5K50

    【Java 进阶篇】JavaScript DOM Document对象详解

    document.body: 获取文档的元素。 document.title: 获取或设置文档的标题。 接下来,我们将逐一介绍这些属性和方法,并提供相应的案例以帮助理解。...最后,我们通过appendChild方法将新元素添加到容器中。 这个过程可以动态地向文档中添加内容,非常适用于需要根据用户操作动态生成元素的情况,比如添加新的列表项或评论。...这可以在页面加载时或在JavaScript代码中使用,以将内容动态添加到文档中。 需要注意的是,document.write方法会替换整个文档内容,因此要慎用,以免破坏页面的结构。...事件是与HTML元素相关的用户行为,例如单击、鼠标悬停、键盘输入等。JavaScript允许您捕获这些事件并执行相应的操作。以下是一些常见的DOM事件: click: 当元素被单击时触发。...然后,我们使用addEventListener方法来添加一个点击事件处理程序,当按钮被点击时,将触发alert弹窗。

    35420

    C#学习笔记—— 常用控件说明及其属性、事件

    设计时,向GroupBox 控件中添加控件的方法有两种:一是直接在分组框中绘制控件;二是把某一个已存在的控件复制到剪贴板上,然后选中分组框,再执行粘贴操作即可。...Items.Add 方法向列表框中添加列表项时,不重绘列表框。...即在向列表框添加项之前,调用BeginUpdate方法,以防止每次向列表框中添加项时都重新 绘制 ListBox 控件。...完成向列表框中添加项的任务后,再调用 EndUpdate 方法使 ListBox 控件重新绘制。当向列表框中添加大量的列表项时,使用这种方法添加项可以防止在绘制 ListBox 时的闪烁现象。...值为true时,表示是父窗体,值为false时,表示不是父窗体。 (3)MdiChildren属性:该属性以窗体数组形式返回MDI子窗体,每个数组元素对应一个 MDI子窗体。

    9.9K20

    使用C#开发数据库应用程序

    开头:只能以字母或下划线开头 不能使用的:不能是C#中的关键字 c.C#中的运算符 算术运算符 + - * / % -- 比较运算符 > = <= == != 条件运算符 ?...Text 窗体标题栏显示的文字 WindowState 窗体出现时是最大化的(Maximized) 例如: //用户选择"退出"菜单项时,退出应用程序 private void tsmiExit_Click...【在父窗体中添加一个菜单Name(tsmiWindows),添加一个"窗口"菜单项,将菜单控件的MdiWindowListItem属性设为"窗口"菜单项(tsmiWindows)】 5-3:使用WinForms...这就是ADO.NET的断开连接模型。 b.ADO.NET的主要组件 (1).NET Framwork数据提供程序是专门为数据处理以及快速地只进、只读访问数据而设计的组件。...,我们在程序的开头增加了一条引用命名空间的语句using System.Data.SqlClient; 6-3:异常处理 a.如何处理异常 语法: try { //包含可能出现异常的代码

    5.9K30

    继续死磕前端

    1.1 jquery 选择器 还记到大明湖畔(CSS)的夏雨荷(选择器)吗?选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同,只是目的是为其添加操作。...id是box的元素的父元素 $('#box').parent(); //选择id是box的元素的所有子元素 $('#box').children(); //选择id是box的元素的同级元素 $(...[a-z0-9] : 匹配a到z或者0到9中的任意一个字符 限制开头与结尾: ^ 以紧挨的元素开头 $ 以紧挨的元素结尾 那么参数部分,常用的有: g:global,全文搜索,默认搜索到第一个结果接停止...(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

    2.8K10
    领券