This is the 27th day of my participation in Gwen Challenge

Before we begin, let’s redefine EventUtil:

const EventUtil =  {
    addHandler: () = > {
        // Same code as above
    },
    getEvent: (e) = > {
        return e ? e : window.event;
    },
    getTarget: (e) = > {
        return e.target || src.element;
    },
    preventDefault: (e) = > {
        if(e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValues = false; }},removeHandler: () = > {
        // Same code as above
    },
    stopPropagation: () = > {
        if(e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true; }}},Copy the code

We’ve added four new methods to EventUtil.

  • GetEvent: Returns a reference to the event object.
  • GetTarget: Returns the target of the event.
  • PreventDefault: Indicates the default behavior of the cancel event.
  • StopPropagation: Block event propagation.

2. Page coordinates

The client coordinates tell you where the mouse occurred in the viewport, while the page coordinates tell you where the event occurred on the page through the pageX and pageY properties of the event object. This position is calculated from the left and top edges of the page itself.

The following code can get the coordinates of mouse events on the page:

const div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click'.(e) = > {
    e = EventUtil.getEvent(e);
    alert(`page coordinates: ${e.pageX}.${e.pageY}`);
});
Copy the code

In the absence of page scrolling, the values of pageX and pageY are equal to those of clientX and clientY.

3. Screen coordinates

When a mouse event occurs, there is not only a position relative to the browser window, but also a position relative to the entire computer screen. ScreenX and screenY properties can be used to determine the coordinates of the mouse relative to the entire screen when the mouse event occurs.

The following code gets the coordinates of the mouse event on the screen:

const div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click'.(e) = > {
    e = EventUtil.getEvent(e);
    alert(`screen coordinates: ${e.screenX}.${e.screenY}`);
});
Copy the code

4. The modify button

Although mouse events need to be triggered by a mouse, certain keys on the keyboard can also influence the action of mouse events. These keys are called modification keys. These are Shitf, Ctrl, Alt, and Meta (win on Windows, CMD on MAC), and they are often used to modify the behavior of mouse events. DOM specifies four attributes that represent the state of these change keys: shiftKey, ctrlKey, altKey, and metaKey. These properties are Boolean types that indicate whether a change was pressed.

Consider the following example:

const div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click'.(e) = > {
    e = EventUtil.getEvent(e);
    let keys = new Array(a);if(e.shiftKey) {
        keys.push('shiftKey');
    }

    if(e.ctrlKey) {
        keys.push('ctrlKey');
    }

    if(e.altKey) {
        keys.push('altKey');
    }

    if(e.metaKey) {
        keys.push('metaKey');
    }

    alert(`keys === ${keys.join(', ')}`);
});
Copy the code

This example can get when the mouse event is triggered, whether there is a modification key operation, and prompt to the user in the window.

5. Related elements

Pairs of elements appear when mouseover and mouseout events occur. We need to move one element to the corresponding position of the other element to trigger both events. The two elements in pairs are called related elements.

<! DOCTYPEhtml>
<html>
<head>
    <title>Related elements</title>
</head>
<body>
    <div id="myDiv" style="background-color: red; height: 100px; width: 100px;"></div>
</body>
</html>
Copy the code

In this case, if we move the mouse away from the div element, the mouseout event will be triggered on the div element, which is the body element. At the same time, the mouseover event is triggered by the body, and the associated element is the div.

The DOM provides information about related elements through the relatedTarget attribute of the Event object. For mouse events, this property has a value for only the above two events, and all other events are null. Both property values are supported by existing browsers.

Now we can add another feature to EventUtil.

const EventUtil = {
    // ...
    getRelatedTarget: (e) = > {
        return e.relatedTarget || null; }},Copy the code

The usage is as follows:

const div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'mouseout'.(e) = > {
    e = EventUtil.getEvent(e);
    const target = EventUtil.getTarget(e);
    const relatedTarget = EventUtil.getRelatedTarget(e);
    alert(`moused out of ${target.tagName} to ${relatedTarget.tagName}`);
});
Copy the code

Mouseout displays the trigger element and the tag name of the associated element.

reference

[1] JavaScript Advanced Programming (3rd edition)