在javascript中event的target和currentTarget的区别

JavaScript的event对象中

event.target指代的是:触发事件的元素

event.currentTarget指代的是:事件绑定的元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="test">
            <span>aaa</span>
            <span>bbb</span>
            <span>ccc</span>
        </div>
        <script>
            document.getElementById(‘test‘).addEventListener(‘click‘, function(ev){
                var ev = ev || window.event;
                console.log(ev.target);
                console.log(ev.currentTarget);
            }, false);
        </script>
    </body>
</html>

时间： 2024-08-09 14:47:02

在javascript中event的target和currentTarget的区别的相关文章

关于js中event的target和currentTarget的区别

今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? 通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点击事件那么当点击B时,target是B,currentTarget是A 也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者总结: target在事件流的目标阶段:currentT

JavaScript中event的x,clientX,offsetX的区别

JavaScript中event的x,clientX,offsetX的区别请看下面的文字说明,也就是event中x,clientX,offsetX,screenX的区别: x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置.www.mlybyby.com clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域. offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置. screenX:相对于用户屏幕. 同时你可以对比下面代码分析 Cl

jQuery和javascript中event属性

javascript中event属性说明 1.altKey 描述: 检查alt键的状态. 语法: event.altKey 可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE .只读. 2.button 描述: 检查按下的鼠标键. 语法: event.button 可能的值: 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键这个属性仅用于onmousedown, onmouseup, 和 onmousemov

js中的target与currentTarget的区别<转>

关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶段.只有当他们同事处于目标阶段的时候他们的指向才是一样的,请看以下代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>js性能优化</title

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

javascript中event对象详解

js防止回车(enter)键提交表单及javascript中event.keycode

如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. 如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id="q" name="q" type="text" onkeypress="javascript:return gosearch();&q

target与currentTarget的区别(jqueryui方式获取z-Index)

作者:zccst 原文 :http://zccst.iteye.com/blog/2081412 2014-6-25 今天看了jQuery手册,发现jQuery的事件对象模块也有一个currentTarget,始终指向this. 所以结论是:原生的currentTarget与jQuery的currentTarget完全不是一回事.要重点区别对待. 2014-6-17 target与currentTarget的区别? 通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点

事件冒泡和事件捕获以及解释target和currenttarget的区别

冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内举例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #son{ width: 200px