Take you to the event object from zero understanding JavaScript to the essence of JavaScript

1, Under event object

1.1 concept of event object

What is an event object
When an event is triggered, an event object will be generated, which contains all the information related to the event. This includes the element that caused the event, the type of event, and other information related to a specific event

You can get a hidden parameter through the event bound execution function. Note: the browser will automatically assign a parameter, which is actually an event object

It is W3C's practice to receive event objects directly. IE does not support it. IE defines an event object and obtains it directly in window.event.

input.onclick = function (evt) {
var event = evt || window.event; //Achieve cross browser compatibility to obtain event objects
alert(event );
};

Other writing methods:    var event = evt ? evt: window.event;

keyCode gets which key the user presses on the keyboard and corresponds to a number. Which is not supported under IE8
code = event.keyCode || event.which

Other attributes, such as Ctrl key, shiftKey and altKey, are included in event

Press enter to submit ctrl + press enter to submit
if(code == 13 && event.ctrlKey) {
//Send message
}

1.2 event delegation

Event delegation is to use event bubbling to specify only one event handler to manage all events of a certain type.

The example shows that we add a new li for ul, in which the click event is bound to the li tag element, but it is found that the later added element has no way to trigger our click event.

    <button id="btnAdd">add to</button>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btnAdd = document.getElementById('btnAdd');
        var ulList = document.getElementById('ulList');
        var list = document.getElementsByTagName('li');
        var num = 3;
        btnAdd.onclick = function () {
            num++;
            var li = document.createElement('li');
            li.innerHTML = num;
            ulList.appendChild(li)
        }
        for (i = 0; i < list.length; i++) {
            list[i].onclick = function(){
                alert(this.innerHTML);
            }
        }
    </script>

This is because if the event involves updating an HTML node or adding an HTML node, the newly added node cannot bind the event, and the updated node cannot bind the event. The behavior is that the event cannot be triggered.
One solution is to add listening events again when adding child nodes

    <button id="btnAdd">add to</button>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btnAdd = document.getElementById('btnAdd');
        var ulList = document.getElementById('ulList');
        var list = document.getElementsByTagName('li');
        var num = 3;

        function doclick() {
            for (i = 0; i < list.length; i++) {
                list[i].onclick = function () {
                    alert(this.innerHTML);
                }
            }
        }
        doclick();


        btnAdd.onclick = function () {
            num++;
            var li = document.createElement('li');
            li.innerHTML = num;
            ulList.appendChild(li);
            doclick();
        }
    </script>

This is also the problem:
1. First, we operate the DOM to obtain elements many times, which is bound to reduce the processing performance of the browser
2. Events are not inherited. If we dynamically add an element to the page, we need to go through the above procedure again to add listening events

So is there a better way? According to the bubbling principle of events, we can also implement another very important function: event delegation.

We only listen to the outermost elements, and then perform different event processing according to the event source in the event function. In this way, when we add event listening, we only need to operate one element, which greatly reduces the DOM access, and we don't need to add listening events to the new elements, because the events of the elements will bubble to the outermost layer and be intercepted by us.

    <button id="btnAdd">add to</button>
    <ul id="ulList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btnAdd = document.getElementById('btnAdd');
        var ulList = document.getElementById('ulList');
        var num = 3;

        ulList.onclick = function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert(target.innerHTML);
            }
        }

        btnAdd.onclick = function () {
            num++;
            var li = document.createElement('li');
            li.innerHTML = num;
            ulList.appendChild(li);
        }
    </script>

epilogue

Here, the parent ul is used for event processing. When li is clicked, due to the bubble principle, the event will bubble on the ul. Because there is a click event on the ul, the event will be triggered. Of course, when ul is clicked, it will also be triggered. Therefore, it is necessary to judge whether the clicked object is a li tag element at the bottom.

The Event object provides an attribute called target, which can return the target node of the Event. We call it the Event source, that is, the target can be expressed as the dom of the current Event operation, but it is not the real dom. Of course, this is compatible. ev.target is used for standard browsers and Event.srclelement is used for IE browsers. At this time, only the location of the current node is obtained, We don't know what the node name is. Here we use nodeName to get the specific tag name. This returns an uppercase, which we need to convert to lowercase for comparison (habit problem).

In this way, we have implemented our event delegation. Of course, not all events can be delegated.
Events suitable for event delegation: click, mousedown, mouseup, keydown, keyup, keypress.

When using event delegation, you don't need to traverse the child nodes of the element at all. You just need to add events to the parent element. The newly added nodes can also trigger the event effect.

summary

The above is what brings you to know from zero today JavaScript To the essence (19) JavaScript Events event object(lower)
Will continue to update
 It's not easy to be original. We look forward to your praise, attention and forwarding comments😜😜

Tags: Javascript ECMAScript

Posted on Sun, 21 Nov 2021 15:00:53 -0500 by jstarkey