事件冒泡机制和事件委派 以及回调的匿名函数参数

1.事件冒泡机制:

事件冒泡机制也就是当一个事件绑定到一个元素上时,如果这个元素不存在或者回调函数返回ture,那么这个事件就会向上冒泡,继续绑定这个元素的父级元素直至document。(如果事件返回return false则不会冒泡)

阻止冒泡:1.事件return false ; 2.evt.stopPropagation(这个evt指此次事件,写在事件匿名回调函数的参数里)例如: $(‘li‘).click(function(evt){evt.stopPropagation()});

2.事件委托:

jQuery的on方法和delegate方法都可以给未来出现的元素绑定事件,原理就是利用事件冒泡机制

on方法和delegate方法会将【事件处理函数】绑定(委托)在需要绑定的元素的父级元素上,当其子元素触发事件时,这个事件会冒泡上来触发父元素身上的【事件处理函数】,而这个过程中会判断这个事件发生的元素是否是子元素,如果不是子元素,就不执行【事件处理函数】;

具体思路是下面这样:

// 获取父节点,并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的处理过程在这里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

e是这个事件,e.target事件发生的元素/事件源;

时间: 2024-10-03 08:43:33

事件冒泡机制和事件委派 以及回调的匿名函数参数的相关文章

JavaScript系列之事件冒泡机制简介

JavaScript系列之事件冒泡机制 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head> <title>js事件冒泡测试</title> </head> <body>

事件流及事件冒泡机制

事件流 "DOM2级事件"规定的事件流包括三个阶段: 事件捕获阶段(为截获事件提供了机会) 处于目标阶段(实际的目标接收到事件) 事件冒泡阶段(可以在这个阶段对事件做出响应) IE9.Opera.Firefox.Chrome 和 Safari 都支持 DOM 事件流:IE8 及更早版本不支持 DOM 事件流. 事件冒泡机制 a.在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回

解析Javascript事件冒泡机制

本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/23927347 ----------------------------------------------------------------------------------------------------------------------------------------- 1.

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

浅谈js的事件冒泡机制

很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里. 这里就有一个小细节,dom点击后,它所有的父级都会触发事件,每一级绑定的事件都会触发,这样是耗费事件和性能进行处理的,但是,如果我们把事件都绑定到document根节点,这样只需要在最后一级的时候,区别是那个dom触发的就行了,这个也叫事件委托. 其实这个场景适用于,子节点和众多父

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念--事件和事件流 事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等 事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始 一级级向上冒泡,到document为止--从里到外 IE 5:div--body--document; I

JS事件冒泡机制以及委托方法,以及vue中的stop

要理解事件冒泡机制,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型:鼠标键盘事件.页面事件.表单相关事件. 鼠标键盘事件:onclick.ondbclick.onmousedown.onmouseup.onmouseover.onmousemove.onmouseout.onkeypress.onkeydown.onkeyup: 页面事件:onload.onunload.onresize.onerror.onabort:

事件冒泡与捕获&amp;事件委托

设想这样一种情况 一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都同意,事实就是这样的, 第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div? 早期就有两个主流的浏览器厂商各执己见,IE认为,这个事件首先触发span,然后依次往父节点传递,最终传递到document,(这个过程称为冒泡) 网景浏览器认为,任何事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获)

事件冒泡以及取消事件冒泡方法

事件冒泡 以及 取消事件冒泡方法 1. 事件冒泡的原理: 2. 取消事件冒泡的方法: 方法一:return false  (在定义的事件回调函数的后面加上这句代码) 方法二:event. stopPropagation() 方法三:event. preventDefault() (在Chrome浏览器中,失效了) 原文地址:https://www.cnblogs.com/david-lcw/p/10430271.html