Two small exercise JavaScript DOM event object | learning content sharing

Event objects

Event object represents the state of the event, such as an event in which the state of the element occurs, the state of the keyboard keys, mouse position, mouse buttons.

Event is usually used in conjunction with the function, the function will not be executed before the event occurs!

This paper used to record personal learning process of two small exercises, which include some of the compatibility issues to resolve as well as issues of usage and event object

The coordinates of the mouse pointer
div follow the mouse

Exercise

1 acquires coordinates of the mouse pointer

Two div, when the mouse is moved on top of div # areaDiv, the coordinates of the mouse pointer displayed in the following div # showMsg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #areaDiv{
                width: 500px;
                height: 200px;
                border: 1px solid black;
            }
            #showMsg{
                width: 500px;
                height: 50px;
                margin-top: 20px;
                border: 1px solid black;
            }
        </style>
    
        <script type="text/javascript">
            
            window.onload = function(){
                /*
                 * 当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
                 */
                //获取div
                var areaDiv = document.getElementById("areaDiv");
                var showMsg = document.getElementById("showMsg");
                
                /*
                 * 事件对象
                 *  - 当事件的响应函数被触发时，浏览器会将一个事件对象作为实参传递进响应函数，
                 *      在事件对象中封装了当前事件相关的一切信息，比如：鼠标指针的坐标，键盘哪个按键被按下
                 */
                areaDiv.onmousemove = function(event){
                    
                    /*
                     * 在IE8中，响应函数被触发时，浏览器不会传递事件对象
                     *  而是将事件对象作为window对象的属性保存的 window.event
                     * 但此方法不兼容火狐
                     */
                    
                    /*解决兼容问题，使用if判断
                    if(!event){
                        event = window.event;
                    }*/
                    //此方法更简单方便
                    event = event || window.event;  
                    
                    /*      获取坐标值
                     *  clientX 可以获取鼠标指针的水平坐标
                     *  clientY 可以获取鼠标指针的垂直坐标
                     */
                    var x = event.clientX;
                    var y = event.clientY;
                    //显示坐标值
                    showMsg.innerHTML = 'x='+x+' , y='+y;
                };
            };
            
        </script>
    </head>
    <body>
        <div id="areaDiv"></div>
        <div id="showMsg"></div>
    </body>
</html>

2 div follow the mouse

When the mouse moves on the page, the div to follow its movement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div跟随鼠标移动</title>
        <style type="text/css">
            body{ width:2000px; height: 1000px;}   /*使页面出现滚动条*/
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                
                var box1 = document.getElementById("box1");
                
                //使div可以跟随鼠标移动，响应函数加给document
                document.onmousemove = function(event){
                    event = event || window.event;
                    
                    //获取滚动条滚动距离
                    var st = document.documentElement.scrollTop;
                    var sl = document.documentElement.scrollLeft;
                
                    //获取鼠标指针坐标
                    /*  clientX、clientY
                     * 用于获取当前可见窗口的鼠标坐标
                     * 而div的偏移量是相对整个页面的
                     * 
                     * pageX、pageY可以获取鼠标相对当前页面的坐标
                     *  但是不兼容IE8及以下
                     *  
                     *  因此我们选择获取滚动条滚动距离，将其加到div的偏移量上
                     */
                    var left = event.clientX;
                    var top = event.clientY;
                    
                    //设置div偏移量
                    box1.style.left = left +sl+'px';
                    box1.style.top = top +st+'px';
                    
                };
            };
            
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>

Part of the contents from online tutorials, invasion deleted.