事件和事件对象 - 《JavaScript 基础知识》

1.事件
2.事件对象
3.使div可以跟随鼠标移动

1.事件

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动、关闭窗口。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            我们可以在事件对应的属性中设置一些js代码，
                这样当事件被触发时，这些代码将会执行
            这种写法我们称为结构和行为耦合，不方便维护，不推荐使用    
        -->
        <!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
        <button id="btn">我是一个按钮</button>
        <script type="text/javascript">
            /*
             * 事件，就是用户和浏览器之间的交互行为，
             *     比如：点击按钮，鼠标移动、关闭窗口。。。
             */
            //获取按钮对象
            var btn = document.getElementById("btn");
            /*
             * 可以为按钮的对应事件绑定处理函数的形式来响应事件
             *     这样当事件被触发时，其对应的函数将会被调用
             */
            //绑定一个单击事件
            //像这种为单击事件绑定的函数，我们称为单击响应函数
            btn.onclick = function(){
                alert("你还点~~~");
            };
        </script>
    </body>
</html>

2.事件对象

事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向。。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #areaDiv {
        border: 1px solid black;
        width: 300px;
        height: 50px;
        margin-bottom: 10px;
    }
    #showMsg {
        border: 1px solid black;
        width: 300px;
        height: 20px;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        /*
         * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
         */
        //获取两个div
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");
        /*
         * onmousemove
         *     - 该事件将会在鼠标在元素中移动时被触发
         * 
         * 事件对象
         *     - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
         *         在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
         */
        areaDiv.onclick = function(event){
            /*
             * 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
             *     在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
             */
            /*if(!event){
                event = window.event;
            }*/
            //解决事件对象的兼容性问题
            event = event || window.event;
            /*
             * clientX可以获取鼠标指针的水平坐标
             * cilentY可以获取鼠标指针的垂直坐标
             */
            var x = event.clientX;
            var y = event.clientY;
            //alert("x = "+x + " , y = "+y);
            //在showMsg中显示鼠标的坐标
            showMsg.innerHTML = "x = "+x + " , y = "+y;
        };
    };
</script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>

3.使div可以跟随鼠标移动

html对应document.documentElement;
body对应document.body

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                /*
                 * 开启box1的绝对定位
                 */
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                /*
                 * 使div可以跟随鼠标移动
                 */
                //获取box1
                var box1 = document.getElementById("box1");
                //绑定鼠标移动事件
                document.onmousemove = function(event){
                    //解决兼容问题
                    event = event || window.event;
                    //获取滚动条滚动的距离
                    /*
                     * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                     * 火狐等浏览器认为浏览器的滚动条是html的，
                     */
                    var st = document.body.scrollTop || document.documentElement.scrollTop;
                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                    //var st = document.documentElement.scrollTop;
                    //获取到鼠标的坐标
                    /*
                     * clientX和clientY
                     *     用于获取鼠标在当前的可见窗口的坐标
                     * div的偏移量，是相对于整个页面的
                     * 
                     * pageX和pageY可以获取鼠标相对于当前页面的坐标
                     var left = event.pageX;
                     var　top = event.pageY;
                     *     但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                     */
                    var left = event.clientX;
                    var　top = event.clientY;
                    //设置div的偏移量
                    box1.style.left = left + sl + "px";
                    box1.style.top = top + st + "px";
                };
            };
        </script>
    </head>
    <body style="height: 1000px;width: 2000px;">
        <div id="box1"></div>
    </body>
</html>