小结event.target与this

  • 小结event.target与this已关闭评论
  • 39 次浏览
  • A+
所属分类:Web前端
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: black;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box3 {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">

         //案例中点击box3时:分别会出现以下情况

        // 使用target会弹出三次box3
        // 使用this会弹出box3 box2 box1(冒泡)
        window.onload = function () {
            var box1 = document.getElementsByClassName("box1")[0];
            var box2 = document.getElementsByClassName("box2")[0];
            var box3 = document.getElementsByClassName("box3")[0];
            box1.onclick = function (event) {
                event = event || window.event;  //估计是兼容性写法
                alert(event.target.className);  //event.target指向的是被触发事件(被点击)的对象
                // alert(this.className);   //this指向的是事件绑定的对象
            }
            box2.onclick = function (event) {
                event = event || window.event;
                alert(event.target.className);
                // alert(this.className);
            }
            box3.onclick = function (event) {
                event = event || window.event;
                alert(event.target.className);
                // alert(this.className);
            }
        }

        // 运行这个DEMO,在事件冒泡的背景下,点击box3,event.target.className为box3,之后冒泡的事件弹出的信息也为box3;
        // 这是因为event.target指向的是被触发事件(被点击)的对象(box3),仅通过box3触发了一次事件(点击),所以只弹出一次box3;
        // 而this.name则依次弹出的为box3,box3,box1,这是因为this指向的是事件绑定的对象,事件冒泡中连续触发了三次事件,这三次事件绑定的对象都不同。
        // 简单的说就是,你点击了box3,那么e.target就是box3;并且由于你点击了box3,通过点击box3冒泡触发了box1,box2,
        // 在box1和box2的事件中,e.target也是box3。但是this是谁,就和由谁触发了事件无关了。比如,无论是box2,还是box3触发了box1的事件,还是box1的事件根本没有被触发,box1的事件的this永远都是box1,忠心耿耿
        // ========================总结==========================
        // 1.this是Javascript语言的一个关键字。

        // 2.this代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

        // 3.event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

        // 4.this和event.target的区别:

        // js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化(在事件触发时,只传递当前event对象的引用),它永远是直接接受事件的目标DOM元素;

        // 另外,this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

    </script>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">

            </div>
        </div>
    </div>
</body>

</html>