js操作DOM事件中event的target和currentTarget的区别

时间: 2017-11-29阅读: 508标签: js事件

事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间,通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码的过程。在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。其中event下的currentTarget与target是我们比较常用的属性,两个属性看上去挺相似的,两个属性的解释是:


target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)(一般为父级)。this指向永远和currentTarget指向一致(只考虑this的普通函数调用)。

  

<div id="outer" style="background:#099">  
 click outer  
 <p id="inner" style="background:#9C0">click inner</p>  
 <br>  
</div>  

<script type="text/javascript">  
function G(id){  
    return document.getElementById(id);      
}  
function addEvent(obj, ev, handler){  
    if(window.attachEvent){  
        obj.attachEvent("on" + ev, handler);  
    }else if(window.addEventListener){   
        obj.addEventListener(ev, handler, false);  
    }  
}  
function test(e){  
    alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  
}  
var outer = G("outer");  
var inner = G("inner");  
//addEvent(inner, "click", test);  
addEvent(outer, "click", test);  
</script>

解析:

当点击inner对象的时候,先触发inner绑定的事件,再触发outer绑定的事件,(因为outer是在事件冒泡阶段绑定的,如果outer是在捕获阶段绑定的,就会先触发out的事件程序,即便inner事件也绑定在捕获阶段。因为捕获流从根部元素开始)。 
事件流:捕获(自顶而下)——目标阶段——冒泡(自下而顶)

在事件处理程序内部,对象this始终等于currentTarget的值(换个角度理解,DOM上的方法this指向都为该DOM-方法调用模式),而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。


vue 监听组件原生事件_使用vue中的修饰符.native

.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

vue自定义移动端touch事件,点击、滑动、长按事件

vue自定义指令_监听移动端touch事件,包括:点击、滑动、长按等事件,加强对Touch的一些理解。Vue.directive指令封装的使用

js 按键监听_JS实现监听组合按键

有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。下面简单梳理一下思路,我们所熟悉的按键有这么集中类型:

js动态元素绑定事件_jquery、原生js实现动态添加新元素_监听事件

在实现click绑定事件的时候,发现只能对已经加载好的元素进行绑定,如果后来通过js动态插入的元素则无法绑定事件

你知道哪些html事件不能冒泡?

我们都知道一般事件的流程是:事件捕捉——>目标元素发生事件——>事件冒泡。但是不是所有的事件和click事件都一样是冒泡的,那么如何判断给事件是否不能冒泡呢?

Javascript - 事件顺序

“假设一个元素及其祖先元素的事件句柄指向了同一事件,哪个先触发?”不出意料,这取决于浏览器。

js中的事件委托或是事件代理详解

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

js事件冒泡和事件捕获详解

事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。

通过原生js对DOM事件的绑定的几种方式总汇

在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。