Event object properties and methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Event对象属性与方法</title>
    <!-- 
        event;代表事件本身
        event.type;On behalf of event types; such as: the Click 
        event.target; represent the source of the triggering event, popular understanding: Click who triggered the event, target who is
        event.currentTarget; represents an element that contains the event; the popular understanding: who is who in the event binding, currentTarget is who 
        event.preventDefault (); to prevent the default behavior; prevent such a link tag jump 
        event.stopPropagation (); prevent incidents take bubble and event capture; (translation propagation: propagation / breeding / spread) 
        clientX / clientY; when the triggering event of the browser window the mouse is fixed X / Y axis coordinates, without affecting the scroll bar; 
        pageX / pageY; when the mouse is a triggering event browser window X / Y coordinate axis, influence by a scroll bar; 
        screenX / screenY; triggering event of the screen mouse X / Y-axis coordinate; 
     -> 
     < style > 
         #div { 
             width : 100px ; 
             height : 60px ; 
             border : 1px Solid Black ; 
         } 
         #sec { 
             width: 400px;
             height: 1000px;
             background: yellow;
         }
     </style>
</head>
<body>
    <div id="div">
        爸爸<br />
        <button id="btn">儿子</button>
    </div>
    <a id="a" href="https://www.baidu.com/"Baidu>
    
        
        
    
    
    
        btn = document.getElementById ( " btn " );
         // event.target/event.currentTarget 
        // function parameter is the default event handler event; you can easily name (eg: function (a)), follow-up calls can have parameters, you can directly use event 
        div.addEventListener ( " the Click " , function () {     
            console.log ( " call my dad " ) 
            console.log (event.target); // trigger source event; that is the whole the Button 
            console.log (event. the currentTarget); // execute the event itself contains the elements; that is, the entire div 
        })
         // event / event.type 
        btn.addEventListener ( "the Click " , function () { 
            the console.log (Event); // event itself 
            the console.log (Event.type); // Event Type 
            
        }) 
        // the event.preventDefault () 
        var A = document.getElementById ( " A " ); 
        a.addEventListener ( " the Click " , function () { 
            the event.preventDefault (); // prevents a jump tag links 
        })
         // that event.stopPropagation () 
        var UL = document.getElementById (" UL " );
         var Li = document.getElementById ( " Li " ); 
        ul.addEventListener ( " the Click " , function () { 
            Alert ( " UL " ); 
        }); 
        li.addEventListener ( " the Click " , function () { 
            Alert ( " li " ); 
            event.stopPropagation (); // after adding this attribute, triggering stop bubbling after li events, events will not be executed ul 
        })
         //the clientX / clientY; the pageX / pageY; screenX / screenY; 
        var sec = document.getElementById ( " sec " ;) 
        sec.addEventListener ( " the Click " , function () { 
            the console.log (event.clientY); // trigger event the screen coordinates of the mouse, without affecting the scroll bar 
            console.log (event.pageY); // mouse trigger event coordinates browser window, by the influence of scrollbar 
            console.log (event.screenY); // triggered when a mouse event screen coordinate 
        })
     </ Script > 
</ body > 
</ HTML >
Event object properties and methods

Guess you like
