JavaScript DOM Event Object

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #areaDiv{
            width: 300px;
            height: 100px;
            border: solid 1px black;
        }
        #showMsg{
            width: 100px;
            height: 20px;
            border: solid 1px black;
        }
        #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                /*
                 * To set the offset left, top, absolute positioning to open 
                 * / 
                position: Absolute; 
            }
     </ style> 
    <body> 
        <div ID = "areaDiv"> </ div> 
            <br /> 
        <div ID = "showMsg "> </ div> 
        <div ID =" box1 "> 
            
        </ div> 
    </ body> 
    <Script type =" text / JavaScript "> / * when the mouse is moved in areaDiv, the mouse coordinate display showMsg in
          * / var areaDiv document.getElementById = ( "areaDiv" );
         var showMsg = document.getElementById ( "showMsg" );
        // mouse motion events 
        areaDiv.onmousemove = function (Event) {
 //
        
                    Alert ( "Hello"); 
            // the Event event object passed as an argument response function 
            var X = event.clientX;
             var Y = event.clientY; 
            showMsg.innerHTML = "X =" + X + "," + "Y = "+ Y; 
        } 
//         https://www.w3cschool.cn/jsref/dom-obj-event.html 

        // # box1 follow the mouse 
        var box1 = document.getElementById (" box1 " ); 
        document.onmousemove = function (Event) {
             // address compatibility issues 
            Event Event = || the window.event;
             // CSS offset is set, the coordinate setting 
             //clientX visible window relative coordinates, relative coordinates of the page when the scroll bar div rain does not correspond to this time have pageX 
            box1.style.left = event.pageX + "PX" ; 
            box1.style.top = + event.pageY " PX " ; 
        }
     </ Script> 
</ HTML>
JavaScript DOM Event Object

Guess you like
