JavaScript事件属性event.target和currentTarget 属性的区别。

2020-12-13 04:25

阅读：474

标签：button name font img fun 技术 16px nbsp opp

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

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

一、事件属性:event.target

target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干

例子1

 1 DOCTYPE html>
 2 html>
 3 
 4     head>
 5         meta charset="UTF-8">
 6         title>title>
 7         style type="text/css">
 8             #main {
 9                 width: 200px;
10                 height: 100px;
11                 background: red;
12             }
13         style>
14         script type="text/javascript">
15             window.onload = function() {
16                 document.getElementById("main").onclick = function(e) {
17                     /*这里e等于window.event也可以写成event.*/
18                     console.log(e.target);                //我爱JavaScript
19                     console.log(e.target.id);            //main  返回点击元素里存在的id属性值
20                     console.log(e.target.tagName);        //DIV
21                     console.log(e.target.nodeName);        //DIV
22                     console.log(e.target.classList);    //输出dom类列表,没有即空
23                     console.log(e.target.className);    // sb js node
24                     console.log(e.target.innerHTML);    //我爱JavaScript
25                     console.log(e.target.innerText);    //我爱JavaScript
26                     
27                      console.log("----------------------------------------------------")
28 
29                     console.log(e.type);    //获取事件类型：click
30                     console.log(event.pageX+":"+event.pageY);  //鼠标相对于文件的左侧和顶部边缘的位置
31                     console.log(event.target);                //获取发起事件的标签
32                     console.log(event.currentTarget);        //获取发起事件的标签 
33                     console.log(event.currentTarget.id);    //获取发起事件的标签里的id属性值
34                     console.log(event.which)            //针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮 常用在keydown事件中
35                     console.log(event.timeStamp);            //事件触发与事件创建之间的时间间隔 
36                     alert("点击了id为："+event.target.id+"的"+event.target.nodeName+"标签");
37 
38                     // console.log(e.preventDefault());       //阻止默认事件
39                     // console.log(e.stopPropagation());      //阻止事件冒泡到父元素
40                 }
41             }
42         script>
43     head>
44 
45     body>
46         div id="main" class="js node">span>我爱JavaScriptspan>div>
47     body>
48 
49 html>

View Code

输出如下：

　　　　技术图片

tip:给网页里ID为main的div标签绑定了一个鼠标点击事件，而在实际中，在点击了这个div内的所有子标签时，都会触发这个事件，这个过程就是“冒泡”

例子中的事件传播顺序：

在冒泡型事件流中，是span> div > body > html > document。
在捕获型事件流中，是document > html > body> div > span。

例子2：一个添加删除的demo

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>一个增删demotitle>
head>
body>
    input type="text" id="text">
    input type="button" value="添加" id="button">
    ul>
        li>第1个button class="btn" id="1">删除button>li>
        li>第2个button class="btn" id="2">删除button>li>
        li>第3个button class="btn" id="3">删除button>li>
    ul>
    script>
            var button = document.getElementById("button");
            var text = document.getElementById("text");
            var ul = document.getElementsByTagName("ul")[0];
            var btnClass = document.getElementsByClassName("btn");        
        button.onclick = function(){
            var deleteButton = document.createElement("button");    
            var value = text.value;
                deleteButton.setAttribute("class","btn");
            var deleteText = document.createTextNode("删除");
                deleteButton.appendChild(deleteText);
            var li = document.createElement("li");
            var liText = document.createTextNode(value);
                li.appendChild(liText);
                li.appendChild(deleteButton);
                ul.appendChild(li);
            for(var i=0;ibtnClass.length;i++){
                btnClass[i].onclick=function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
        }

            for(var i=0;ibtnClass.length;i++){
                btnClass[i].onclick=function(){
                    this.parentNode.parentNode.removeChild(this.parentNode);
                }
            }
    script>
body>
html>

效果如下：

　　技术图片

二、currentTarget

event.currentTarget的作用是什么呢，我觉得他和this 的作用是差不多的，始终返回的是绑定事件的元素

例子1

效果

技术图片

资料参考：https://www.cnblogs.com/sxz2008/p/6393232.html

JavaScript事件属性event.target和currentTarget 属性的区别。

标签：button name font img fun 技术 16px nbsp opp

原文地址：https://www.cnblogs.com/jing-tian/p/11109739.html

上一篇：Java报异常时getMessage()方法返回null

下一篇：Python3解leetcode Factorial Trailing Zeroes

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JavaScript事件属性event.target和currentTarget 属性的区别。
文章链接：http://soscw.com/essay/29466.html

亲，登录后才可以留言！

JavaScript事件属性event.target和currentTarget 属性的区别。

一、事件属性:event.target

例子1

例子2：一个添加删除的demo

二、currentTarget

例子1

评论

热门文章

推荐文章

最新文章

置顶文章