精华内容
下载资源
问答
  • event.targetevent.currentTarget 的区别

    千次阅读 2020-10-28 09:33:16
    event.target This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the...

    event.target

    This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

    event.currentTarget 

    Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred. 

    读定义总是很绕,要彻底了解这两者的区别,我们要先了解浏览器中事件传递的机制冒泡捕获。 

    冒泡和捕获 

    在页面中点击一个元素,事件是从这个元素的祖先元素中逐层传递下来的,这个阶段为事件的捕获阶段。当事件传递到这个元素之后,又会把事件逐成传递回去,直到根元素为止,这个阶段是事件的冒泡阶段。

     

    我们为一个元素绑定一个点击事件的时候,可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener的第三个参数为true的时候,代表是在捕获阶段绑定,当第三个参数为false或者为空的时候,代表在冒泡阶段绑定。

    知道事件有这么一个穿透的过程之后,结合下面的例子,就可以很好来理解event.targetevent.currentTarget

    <div id="a">
        <div id="b">
          <div id="c">
            <div id="d"></div>
          </div>
        </div>
    </div>
    
    <script>
        document.getElementById('a').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('b').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('c').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('d').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
    </script>

    上面事件的绑定都是在冒泡阶段的,当我们点击最里层的元素d的时候,会依次输出:

    target:d&currentTarget:d
    target:d&currentTarget:c
    target:d&currentTarget:b
    target:d&currentTarget:a

    从输出中我们可以看到,event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget

    如果我们把事件都绑定在捕获阶段,然后还是点击最里层的元素d,这时event.target还依旧会指向d,因为那是引起事件触发的元素,因为event.currentTaget指向事件绑定的元素,所以在捕获阶段,最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下:

    target:d&currentTarget:a
    target:d&currentTarget:b
    target:d&currentTarget:c
    target:d&currentTarget:d

    简言之:

    event.currentTarget 获取到的是发起事件的标签元素

    event.target 获取的是触发事件的标签元素

    展开全文
  • Use event.currentTarget instead of event.target because of event bubbling/capturing: event.currentTarget- is the element that has the event listener attached to. event.target- is the element that ...

    区别

    Use event.currentTarget instead of event.target because of event bubbling/capturing:

    • event.currentTarget- is the element that has the event listener attached to.
    • event.target- is the element that triggered the event.

    尽可能使用event.currentTarget获取事件点击元素,而不是event.target

    • event.currentTarget- 监听事件绑定的元素
    • event.target- 触发事件的元素。事件可能冒泡到父元素,随意触发事件的可能是父元素。

    测试代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    		<style>
    			#parent {
    				background-color: red;
    				width: 250px;
    				height: 220px;
    			}
    		
    			#child {
    				background-color: yellow;
    				height: 120px;
    				width: 120px;
    				margin: 0 auto;
    			}
    		
    			#grand-child {
    				background-color: blue;
    				height: 50px;
    				width: 50px;
    				margin: 0 auto;
    			}		
    			#msg,
    			#jQmsg,
    			#arrmsg {
    				font-size: 16px;
    				font-weight: 600;
    				background-color: #eee;
    				font-family: sans-serif;
    				color: navy;
    			}
    			</style>
    				
    	</head>
    	<body>
    		<div id="parent">Parent-(attached event handler)<br><br>
    			<div id="child"> Child<br><br>
    			  <p id="grand-child">Grand Child</p>
    			</div>
    		</div>	
    		<div id="msg"></div><br>
    		<div id="jQmsg"></div><br>
    		<div id="arrmsg"></div>			
    	</body>
    	<script type="text/javascript">
    		(function() {
    			var parent = document.getElementById('parent');
    				parent.addEventListener('click', function(e) {
    			  
    				document.getElementById('msg').innerHTML = "this: " + this.id +
    				"<br> currentTarget: " + e.currentTarget.id +
    				"<br>target: " + e.target.id;
    				});
    				$('#parent').on('click', function(e) {
    				$('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
    							   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
    							   + "<br>target: " + $(e.target).prop('id'));
    				});
    				$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));
    		})();
    	</script>
    
    	</html>
    
    

    测试结果

    case1:点击grand child
    target: 触发事件的是parent.
    currentTarget:绑定
    在这里插入图片描述

    case2

    点击黄色child。
    1 target 触发元素chilid
    2 currenttarget 是parent
    在这里插入图片描述

    展开全文
  • IE中,event对象有srcElement属性,但是没有target属性。 firefox中,event对象有target属性,但是没有srcElement属性。 可以使用,var node = event.srcElement?event.srcElement:event.target; 或,var node =...

    IE中,event对象有srcElement属性,但是没有target属性。

    firefox中,event对象有target属性,但是没有srcElement属性。

    可以使用,var node = event.srcElement?event.srcElement:event.target;

    或,var node = event.srcElement || event.target;


    都是返回事件触发时鼠标所在的对象


    function getEventDate(eObj) {

    var node  = eObj.srcElement || eObj.target;

    alert(node.nodeName); //返回节点名称

    }

    展开全文
  • js中event.srcElement和event.target

    千次阅读 2015-06-29 21:06:37
    window.event.srcElement与window.event.target 都是指向触发事件的元素。  event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。 测试按钮 function aa(){ alert...
    

      window.event.srcElement与window.event.target 都是指向触发事件的元素。

      event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。

    <span style="font-size:18px;"><button onClick="aa()">测试按钮</button>
     <script language="JavaScript">
       function aa(){
         alert(window.event.srcElement.innerText)   //显示的是"测试按钮"
       }
     </script></span>

      IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:firefox 下的event.target = IE 下的 event.srcElement

      解决方法:使用obj(obj= event.srcElement ? event.srcElement :event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.




    展开全文
  • event.target

    2019-03-19 00:22:34
    在获取目标事件源的情况,一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源,并且在使用的...
  • event.currentTarget与event.target的区别想大家在使用的时候不是很在意,本文以测试代码来讲解它门之间的不同。即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不...
  • IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:firefox 下的 event.target = IE 下的 event.srcElement解决方法:使用obj ...
  • 在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.。 解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE...
  • 起初不知道这玩意是啥,看到的时候是别人写的原生事件委托时用到,大约猜到是和event.target类似的兼容写法,好奇就度娘搜了一下。 其实就是字面的意思,event的源元素,通过它可以进行和document.getElementById...
  • event.target( ) 会返回触发事件触发的源头元素。 用法:可以用来监听触发事件的元素是否事件发生的源头元素。这个源头元素指的是,当我点击子元素,虽然父元素的点击事件也会被触发(冒泡机制),但子元素才是...
  • this与event.target区别

    2018-11-13 10:58:08
    this和event.target的区别: 1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远指向触发事件的DOM元素本身; 2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为...
  • event.srcElement : 可以捕获当前事件作用的对象  function test(event) {  event = event? event: window.event ... var obj = event.srcElement ? event.srcElement:event.target;  if ( doc
  • jQuery event.target属性

    2017-07-10 16:12:40
    jQuery event.target 属性 定义和用法 event.target 属性返回哪个 DOM 元素触发了事件。 这对比较 event.target 和 this 是非常有用的,以便判断事件是否因事件冒泡被处理。 参数 描述 event 必需。event 参数...
  • event.target.dataset

    千次阅读 2019-03-20 13:54:08
    dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是...1、event.target.dataset https://www.cnblogs.com/aichihuamei/p/6417268.html 2、HTMLElement.dataset https://developer....
  • 在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.。  解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来...
  • 1、this和event.target的区别: JavaScript中事件会冒泡,所以this是可以变化的,但event.target不会变化,永远是触发事件的目标DOM元素。 2、jQuery中的this和event.target this和event.target都是DOM对象。 使用...
  • getAttribute拿的是html属性的值,而prop是DOM接口,存取如何是由DOM规范定义的,跟html上的值是不一定对应的。比如 input.value 你可以改变,但是 input.getAttribute('value') 你拿到的总是html上的属性的值,是...
  • 引用 1.this和event.target的区别:  js中事件是会冒泡的,所以...2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);  eg:  Js代码 
  • jquery event.target的几点说明

    千次阅读 2017-12-26 13:45:47
    event.target 说明:引发事件的DOM元素。 this和event.target的区别 js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素; this和event.target的...
  • 真正的事件dispatch者是event.target,监听事件(addEventListner)的对象是event.currentTarget,Flex skd中有言曰:   "Event objects also have target properties that reference the actual ...
  • event.target.tagName

    2019-10-03 03:30:46
    event.target.tagName 中的tagName属性他返回的就是元素标签的大写名称 例如标签他的tagName就是EM 所以用大写 记住:在 HTML 中,tagName 属性的返回值始终是大写的。 看自链接:...
  • 一个盒子,点击除了自己之外的任何一个地方,就会隐藏。  原理:   点击自己不算 ( 怎么证明我是我 点击的这个对象id ...涉及知识点: 判断当前对象 火狐谷歌 等 event.target.id   ie 678 event.srcElement.id
  • 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素; 2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们...
  • jq 获取dom对象this和event.target

    千次阅读 2017-08-22 15:35:45
    几天学习Ajax,看别人在点击事件获取dom时用event.target获取,发现很多不知道的地方。 ...2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(even
  • event.target 说明:引发事件的DOM元素。 this和event.target的区别 js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素; this和event.target的相同点...
  • JQuery中this和event.target的区别

    千次阅读 2016-09-14 14:47:40
    js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素; this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对
  • this和event.target的区别

    千次阅读 2013-11-04 14:41:26
    js中事件是会冒泡的,所以this是可以变化的,this默认是window对象,但event.target不会变化,它永远是直接接受事件的目标DOM元素; this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为...
  • event 对象有 srcElement , 但没有 target 属性FireFox: event 对象有 target ,但没有 srcElement 属性解决方法 : eve =event.srcElement?event.srcElement:event.target;(个人认为类似于判断游览器)...
  • 源引https://developer.mozilla.org/en-US/docs/DOM/event.currentTarget的...event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 215,780
精华内容 86,312
关键字:

event.target