js in (event) event object

Event Object

• What is the event object?

• is when you trigger an event in the future, some of the descriptions of the incident

• E.g:

     ° You trigger a click event when you point at which position, and how much the coordinates

     ° You trigger a keyboard event when you press a button which

• Each event will have a corresponding object to describe this information, we put this object is called an event object

• Browser gives us a black box, called window.event, is a description of all the event information

• This stuff is useful, but in general, there will be something easy to use compatibility issues in IE version low inside this thing easy to use, but in high versions of IE and Chrome inside so bad

• We have to use another way to get the event object, handler in each event line reference location, the default is the first event object

    var Box document.querySelector = ( '. Box' ) 
    the console.log (Box) 
    box.onclick = function Fn1 (E) {
         // window.event.X coordinate point information based on the displayed page to 
        console.log (ex) 
    }

• In summary, our future in every event inside, want to get the event object when are compatible with the wording

= box.onclick function (E) {
     // compatible written 
    E = E || the window.event 
}

offsetX 和 offsetY

• is relative to the element you click on the inside of the frame start to have a border, then there will be negative

    var Box document.querySelector = ( '. Box' ) 
    box.onclick = function (E) {
         // compatible writing 
        the console.log (e.offsetX) 

    }

clientX and clientY

• with respect to the browser window is calculated, starting from the top left corner of the viewable area of ​​the browser, i.e., the slider is slid to the browser at the moment the position of the reference point, the slider is changed with the movement

    var Box document.querySelector = ( '. Box' ) 
    box.onclick = function (E) {
         // The your browser window to calculate, Y-axis address does not include the navigation bar and the tab bar 
        console.log (e. clientY) 

    }

• Not much to say the value of the Y-axis of the figure at this time will change as I scroll occurs

pageX and pageY

• relative to the coordinate point of the entire page, with or without rolling, are relative to the page to get the coordinates of the point from the top left corner of the start page, that page is a reference point, not with the slider bar changes

    var Box document.querySelector = ( '. Box' ) 
    box.onclick = function (E) {
         // The your browser window to calculate, Y-axis address does not include the navigation bar and the tab bar 
        console.log (e. pageY) 
        the console.log (e.pageX) 
    }

The figure

 

Common events

• roughly divided into several categories, browser events / events mouse / keyboard events / form events / touch event

 

 

Event Listeners

• addEventListener: 78 using the non-IE

• Syntax: element .addEventListener ( 'event type', the event handler, bubbling or capture)

    var Box document.querySelector = ( '. Box' ) 
    box.addEventListener ( 'the Click', function () { 
        the console.log ( 'I am the first event' ) 
    }, to false ) 
    box.addEventListener ( 'the Click', function () { 
        the console.log ( 'I'm a second event' ) 
    }, to false )

    ° When you click on the div when the two functions are executed and registered in accordance with your order execution

    ° prints I was the first event and then print I was the second event

    ° Note: The event type when not write on, click on the event is to click, not onclick

• attachEvent: IE under 78 use

• Syntax: element .attachEvent ( 'event type', the event handler)

    box.attachEvent ( 'the onclick', function () { 
        the console.log ( 'I'm a second event' ) 
    }) 
    box.attachEvent ( 'the onclick', function () { 
        the console.log ( 'I'm a second event ' ) 
    })

    ° When you click on the div when the two functions are executed, and you will be registered in accordance with the reverse order of execution

    ° first print I was the second event and then print my first event

    ° NOTE: This method requires more on

Propagation of an event

• Event propagation is also known as the event flow refers to the flow of execution sequence of events, events. For example, there is a small box in a big box, they gave bind click event. Click the small box big box event will be triggered

• This is called event propagation

    ° When the elements to trigger an event when the parent element will trigger the same event, the parent of the parent element will trigger the same event

    ° In other words, any element on the page trigger event, layer by layer will eventually lead to the same trigger event window, provided that all levels of elements have to have the same event registration, or will not trigger

• In the course of the event spread, there are several points to note:

　　1. similar events will spread

　　2. Click on the element only from the beginning of the event structure up layer by layer in accordance with the html elements will be triggered

　　3. Internal elements with or without the event, as long as there is an upper element of the event, then the event will be triggered upper element

 

Bubbling and capture

• Bubble

　　° is the target of the event from the event handler Start, outward until a trigger event handler window

　　° handler is executed from the bottom up event

• Capture

　　° is the beginning of the event handler from the window, turn inward, as long as the target of the event event handler execution

　　° is performed downward from the event handler

 

Stop event propagation

• If you want to trigger only current events Click on an object, do not want the event trigger an outer layer, can be used without bubbling e.cancelBubble = true or not spread e.stopPropagation ()

    var Box document.querySelector = ( '. Box' )
     var ATR = document.querySelector ( '. ATR' ) 
    box.onclick = function (E) { 
        e.stopPropagation () // do not propagate 
        console.log ( 'I is clicked the Box ' ) 
    } 
    atr.onclick = function (E) { 
        e.cancelBubble = to true  // no bubbling 
        console.log (' I was clicked ATR ' ) 
    }

Event delegates

• I'm going to do is to delegate to someone else to do

• Because our bubbling mechanism, click on the sub-elements when the synchronization will trigger the same event of the parent element, so we can handle an event delegate to the parent element of the elements to do

• Click on sub-element of time, whether the child has no click event, as long as the parent element has a click event, you can trigger the click event of the parent element

    var Box document.querySelector = ( '. Box' )
     var ATR = document.querySelector ( '. ATR' ) 
    
    atr.onclick = function (E) { 
        the console.log ( 'I was clicked ATR' ) 
    }

target

• target this property is the event object inside the property, which is the target you click

• When you click to trigger events, which you click on an element, target is which element

• The target is not compatible, in IE to use srcElement

    var Box document.querySelector = ( '. Box' )
     var ATR = document.querySelector ( '. ATR' ) 
    
    atr.onclick = function (E) {
         var E = E || the window.event // Event compatible writing 
        var target = || e.srcElement e.target // target compatible writing 
        the console.log (target) 
    }

Entrust

• This time, when we click on the box inside the element of time, that can trigger point event box

• And no, we can get in the event you click on an object in the end is which

• This time, we can put li events entrusted to the box parent to do

    var Box document.querySelector = ( '. Box' )
     var ATR = document.querySelector ( '. ATR' ) 
    
    atr.onclick = function (E) {
         var E = E || the window.event // Event compatible writing 
        var target = || e.srcElement e.target // target compatible writing 
        IF (target.className == 'ATR' ) {
             // this is to find the elements which need to operate 
            the console.log (111 ) 
        } 
    }

Finally, we think the next, why use event delegation?

1. improve the performance and efficiency

2. Reduce the event registration, saving memory footprint

3. The next element without registering event again

4. Add the elements behind there will be events

 

The default behavior

• The default behavior is that we need not register, there is its own thing

　　° For example, when we click the right mouse button, a menu will pop up

　　° For example, we click on a label, we do not need to register the click event, he will jump page

• These are things we do not need to register can be achieved, we call the default event

Prevent the default behavior

• Sometimes, we do not want the browser to execute the default event

　　º For example, I give a label binding a click event, click on your time and I hope you can tell me what's your address, instead of jumping Links

　　º then we put a label original default event to stop, let him perform the default event

• We have two ways to prevent the default event

　　º e.preventDefault (): Use non-IE

　　° e.returnValue = false: IE use

• We prevent the default event, it also writes a compatible wording

    var oA = document.querySelector ( 'A' ) 
    a.addEventListener ( 'the Click', function (E) { 
        E = E || the window.event 
        the console.log ( the this .href)
         // The following are compatible wording 
        e.preventDefault ? e.preventDefault (): e.returnValue = false 
    })

 

 

 

Author: Dongcheng east

Source: https://www.cnblogs.com/dcyd/

This article belongs to the author and blog Park total, welcome to reprint, but without the author's consent declared by this section must be retained, and given the original connection in the apparent position of the article page, otherwise the right to pursue legal responsibilities.