首先来了解一下事件冒泡和捕获 事件冒泡：内部事件先触发，然后在触发外部事件 事件捕获：外部事件先被触发，然后在触发内部元素 mouseover（）/mouseout() ：鼠标移入“所选元素以及后代都会触发...” mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能） 父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize... 2 event.target 触发该事件的DOM元素 3 event.currentTarget 在事件冒泡阶段中的当前DOM元素，等同于 this 4...以下是主要的鼠标按钮映射代码对应表 Event.which属性值 对应的鼠标按钮 1 鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为
这时通过 event.target 来得知实际上是哪一个元素发生事件，并处理该事件。这种把监听器装在父层，然后委派给子元素，就是所谓的事件委派。...事件冒泡冒泡阶段则是比较常用的，跟捕获阶段相反，它是先在目标上执行事件监听器，接着传递到父层，再传到父层的父层，然后一路传上去。...event.target 与 event.currentTarget 的差别前面提到事件委派时，我们提到了 event.target 这个属性。...让我们更深入地探讨 event.target 和 event.currentTarget 之间的差异：event.target：指向触发事件的元素在传播过程中， event.target 的值保持不变例如...， event.currentTarget 的值可能会发生变化例如，如果在一个父元素上添加点击事件监听器，当其子元素被点击时，事件会冒泡到父元素，此时 event.currentTarget 将指向父元素根据具体的需求
以前制作导航菜单，总要加许多id在HTML中，js代码也要将id挨个加上去，今日终于习得破解之法，不在用以前那种笨拙的方法了。...zicaidan[i].style.display='block'; this.style.backgroundColor='#999'; }); 我们知道，for循环的便利在上面的函数中并不是我们所想的那样...event.target event.target可以指出当前鼠标所指的元素，我们可以利用这一点写一个函数： function findIndex(target,list){...if(target==list[i]) return i; } return -1; } 该函数的返回值便是与所指父菜单相同的索引值...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex
zicaidan[i].style.display='block'; this.style.backgroundColor='#999'; }); 我们知道，for循环的便利在上面的函数中并不是我们所想的那样...event.target event.target可以指出当前鼠标所指的元素，我们可以利用这一点写一个函数： function findIndex(target,list){...if(target==list[i]) return i; } return -1; } 该函数的返回值便是与所指父菜单相同的索引值...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //设置菜单样式 function addStyle(a){
我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。 因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。...//如果触发事件的对象是我们期望的元素，则执行否则不执行 if (event.target && event.target.className...click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。...父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点。从而可以获取到相应的信息，并作处理。...换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。
创建成功后会在项目文件夹内出现.git 目录 克隆远程仓库 我们可以通过两种方式克隆Git项目。 第一种，通过其他工具（如：Git Bash）将Git项目克隆到本地，然后使用IDEA直接打开项目。...File --> New --> Project from version control --> Git 我们需要填写Git版本库URL、存储目录 ?...Checkout As... ： 使用这个分支创建新的分支并检出到新分支。 Compare With... : 使用当前分支与所选分支做代码提交比较。.... : 使用远程分支创建一个新的本地分支，并检出这个分支。 Compare With : 使用当前分支与所选分支做代码提交比较。...（将所选分支提交加入到当前分支） Merge into Current： 合并分支（将当前分支与所选分支进行合并） Delete ：删除所选分支 本地分支推送到远程仓库 检出要推送的分支，然后项目右键
事件冒泡 比如说父元素添加了onclick事件，当子元素发生onclick事件时，父元素的onclick事件也会触发。 四....方式二： if(event.target == event.currentTarget) { ……} 事件包含最初触发事件的节点引用 和 当前处理事件节点的引用，那如果节点只处理自己触发的事件即可...event.target永远是直接接受事件的目标DOM元素。...，既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？...答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为。
event.target 和 event.currentTarget 的区别 event.target 和 event.currentTarget 的区别 冒泡和捕获： 当addEventListener...的第三个参数为true的时候，代表是在捕获阶段绑定；当第三个参数为false或者为空的时候，代表在冒泡阶段绑定 结论：event.target指向引起触发事件的元素，而event.currentTarget...则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。...，line-height = height 多行文本的高度固定居中, display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上。...em的值不固定，会继承父级元素的字体大小 避免字体大小被重复计算，也就是1.2 * 1.2= 1.44的现象 rem：始终是基于根元素 ，是目前比较好的解决方法。
文本俺将跟大家介绍，如何判断一个当前点击的元素，是否是指定元素的子元素。 解决思路： 俺给父元素指定了一个id，并使用这个循环检查当前元素是否属于它的子元素。...{ return (this.closest(b).length > 0); }; //使用起来也非常方便： $(document).click(function(event){ alert($(event.target...).isChildOf(“.floatLayer”)); }); //或者 $(document).click(function(event){ alert($(event.target).isChildAndSelfOf...document.addEventListener('click', event => { const parentId = 'mycontainer' if (isDescendant(event.target..., parentId)) { //处理是子元素的情况 } else { //处理不是子元素的情况 } }) 在while循环中，俺使用赋值运算符=进行迭代，直到不再有父节点，在本例中为
大家好，今天分享几个和Vue相关的小知识，希望对你有所帮助 1、在Vue.js中获取下拉框选择的值 有时候，我们希望在Vue.js中在选项改变时获取所选的选项。...，将所选值的属性值绑定到该关键属性。...在onChange函数中，我们获取事件对象，并使用event.target.value获取所选值的属性值。...(el === event.target || el.contains(event.target))) { // 在 Vue 实例上执行绑定的函数 vnode.context...在 clickOutsideEvent 方法中，我们检查 el 是否不是 event.target 并且它不包含 event.target。
获取DOM元素获取DOM元素是DOM操作的第一步。以下是一些常用的方法：getElementById：通过元素的ID获取元素。...const newElement = document.createElement('div'); parentElement.replaceChild(newElement, oldElement);克隆节点克隆节点可以快速复制现有节点的内容...以下是克隆节点的方法：cloneNode：克隆一个节点及其所有子节点。...以下是一些常用的属性和方法：事件类型：event.type事件目标：event.target阻止默认行为：event.preventDefault()阻止事件冒泡：event.stopPropagation...以下是一些常用的方法：父节点：element.parentNode子节点：element.childNodes兄弟节点：element.nextSibling, element.previousSibling
1 event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 2 target属性可以是注册事件时的元素或者子元素，通常用于比较event.target...事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同的父元素，而且所有的事件都是一致的...3 11 event.currentTarget : 在事件冒泡过程中的当前DOM元素，冒泡前的当前触发事件的DOM对象, 等同于this 12 this和event.target的区别...this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素 13 .this和event.target都是dom对象，使用jquey中的方法可以将他们转换为...jquery对象，比如this和$(this)的使用、event.target和$(event.target)的使用 转帖：http://blog.51cto.com/lakaodekaola/2085868
三、事件代理(事件委托) 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。...2.如何实现 接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上： // 给父层元素绑定事件 document.getElementById('list').addEventListener...event.target & event.currentTarget 老实说这两者的区别，并不好用文字描述，我们先来看个例子： <div...:d¤tTarget:a 从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target...也就是说，event.currentTarget始终是监听事件者，而event.target是事件的真正发出者。
当子元素上发生特定事件时，事件会冒泡到父元素，然后由父元素上的事件处理程序来处理。事件代理则更侧重于将事件处理的逻辑委托给一个中间的代理对象或函数。...事件冒泡与事件捕获事件冒泡是指当一个元素上的事件被触发时，事件会从该元素开始向上冒泡，依次触发父元素上的相同事件，直到到达文档的根节点。...', function(event) { // 检查事件的目标是否是列表项 if (event.target && event.target.nodeName === 'li') {...对于那些不支持冒泡的事件（如focus和blur），事件代理可能不适用。事件目标精确性：事件代理需要检查事件的目标元素（event.target），以确保正确处理事件。...跨域问题：当事件代理用于处理跨域元素（如iframe中的内容）时，由于浏览器的同源策略限制，可能无法访问event.target的一些属性，从而限制了事件代理的使用。
] 事件捕获和事件冒泡 当一个事件发生在具有父元素的元素上(例如，在我们的例子中是 child 元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。...this 和 event.target 首先，我们得有一个清晰的认知：事件冒泡或者事件捕获，都是针对注册了事件的元素。...关于 this 和 event.target ，总结如下： 在整个事件流程中，event.target 永远都指向真正触发了事件流程的元素 ，即处于事件触阶段的元素。...捕获止于 event.target，冒泡始于 event.target。 主流浏览器都默认在冒泡阶段进行事件注册，所以，只有阻止冒泡的方法而没有阻止捕获的方法。...元素的 addEventListener 方法中的第三个参数是 true 或者 false，对元素自己触发的事件流程都没有任何影响，只有在它的父元素或者子元素在触发相同的事件后才有影响。
那么事件传播是怎样帮助捕获多个按钮事件的呢？ 该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。...事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听 。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。...使用事件委托需要 3 个步骤： 步骤 1：确定要监视事件的元素的父级元素 在上面的例子中， 是按钮的父元素。...步骤 3：用 event.target 选择目标元素 单击按钮时，将会用event 对象参数调用处理函数。...使用事件委托需要三个步骤： 确定要监视事件的元素的父级元素 把将事件侦听器附加到父元素 用 event.target 选择目标元素 ---- 作者：Dmitri Pavlutin 翻译：疯狂的技术宅
ref(); return { selectValue } } } 复制代码 实现思路 首先看看目录结构...args) => emitter.off(...args), $emit: (...args) => emitter.emit(...args) } 复制代码 select.vue 文件是我们的父组件...select_button.value.contains(event.target) && !...我们需要将一组 select & select-item 进行绑定,让Bus在接受时知道事件来自于哪个里面的 select-item 在vue2中我们通常获取实例的parent然后一层一层寻找父类select...select_button.value.contains(event.target) && !
因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的”事件委托” 事件没直接和li元素发生关系，而且绑定父元素了。...event.target target 属性可以是注册事件时的元素，或者它的子元素。...通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。...DOM元素 冒泡前的当前触发事件的DOM对象, 等同于this. this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标...比如this和(this)的使用、event.target和(event.target)的使用； 自定义事件 trigger事件 类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的
比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？..., event.currentTarget); } function son(event) { console.log(event.target, event.currentTarget..., event.currentTarget); } function son(event) { console.log(event.target, event.currentTarget...(event) { console.log(event.target, '加载完毕'); }) 用来加载图片 绑定事件后，设置 img 的 src 即刻加载。...(event) { console.log(event.target, '跳转了'); }) resize 事件 当页面大小发生改变时触发，可以用此来获取一些窗口属性，用来做响应式开发。
3种基本的选择符: 标签名 $(‘p’) ID $(‘#myid’) 类 $(‘.myClass’) 子元素组合符>: $(‘#myid > li’)选择id为myid的元素的所有列表项(li...=location.hostname}) next,nextALL,prev,prevAll,andSelf,siblings:选择所选元素的下一个元素等 连缀(chaining) $('tr:contains...JQuery采取事件冒泡的策略。 事件对象：事件发生时执行的函数可以把事件对象作为参数。...event.target属性：保存发生事件的目标元素 event.stopPropagation(): 阻止事件继续冒泡 event.preventDefault(): 阻止事件的默认操作 $(...event.target).is(): 接收一个选择符表达式作为参数，并验证JQuery对象是否满足它。
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
