29.JS

111. 事件对象

// onmousemove: 该事件将会在鼠标在元素中移动时触发
// 事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
// 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个按键被按下，鼠标滚轮滚动的方向
areaDiv.onmousemove = function(event) {
// clientX,clientY可以获取鼠标指针的水平，垂直坐标
let x = event.clientX;
let y = event.clientY;

showDiv.innerHTML = "x =" + x + "y =" + y;

112. div跟随鼠标移动

<script>
    window.onload = function() {
        var box1 = document.getElementById("box1");
        document.onmousemove = function(event) {
            // clientX和clientY
            // 用于获取鼠标在当前的可见窗口的坐标
            // div的偏移量是相对于整个页面的。
            var left = event.clientX;
            var top = event.clientY;

            // pageX和pageX可以获取鼠标相对于当前页面的坐标
            // 但是不兼容IE8
             var left = event.pageX;
             var top = event.pageY;

            // 获取滚动条滚动的距离
            // chrome认为滚动条是body的，可以通过body.scrollTop获取
            // 火狐等浏览器认为是HTML的
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

            // 设置div的偏移量
            box1.style.left = left + sl + "px";
            box1.style.top = top + st + "px";
        }
    };
</script>

113. 事件的冒泡

<script>

    window.onload = function() {
        // 事件的冒泡(Bubble)
        // - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
        // - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡
        let span = document.getElementById("span");
        span.onclick = function(event) {
            event = event || window.event;
            alert("span被点击了");

            // 取消冒泡
            // 可以将事件对象的cancelBubble设置为true，即可取消冒泡
            event.cancelBubble = true;
        };

        let box1 = document.getElementById("box1");
        box1.onclick = function() {
            alert("box1被点击了");
        };

        let body = document.body;
        body.onclick = function() {
            alert("body被点击了");
        };

    };
</script>

114. 事件的委托

<script>
    window.onload = function () {

        var btn01 = document.getElementById("btn01");
        var ul = document.getElementById("ul");

        btn01.onclick = function() {
            var li = document.createElement("li");
            li.innerHTML = "<a class='link' href='javascript:;'>新添加的超链接</a>";
            ul.appendChild(li);
        }

        /**
         * 为每一个超链接都绑定一个单击响应函数，但是这种操作比较麻烦，
         * 而且这种操作只能为已有的超链接设置事件，而新添加的超链接，必须重新绑定
         *
         * /

//            var allA = document.getElementsByTagName('a');
//            for (var i = 0; i <= allA.length; i++) {
//                allA[i].onclick = function() {
//                    alert("我是a的单击响应函数!!!");
//                }
//            }
        /**
         * 我们希望,只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，
         * 我们可以尝试将其绑定给元素的共同的祖先元素
         *
         * 事件的委派:
         *  - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
         *  从而通过祖先元素的响应函数来处理事件。
         *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
         */
        // 为ul绑定一个单击响应函数
        ul.onclick = function (event) {

            // 如果触发事件的对象是我们期望的元素，则执行，否则不执行
            event = event || window.event;
            if (event.target.className == "link"){
                alert("ul");
            }

        }
    };
</script>