1 Application Scenario

Here’s a development scenario where you need to commit to an input 200 times using the Enter key, and then save the submitted results for later analysis. For example, enter text on baidu home page and press Enter. There are two general schemes:

  • 1. Manually enter 200 different cases into the input and click Submit 200 times.
  • 2. Write a program that automatically handles the time it takes you to get a glass of water.

It is clear that the second way is much better, but you may rarely encounter this case, so also every time how to think about automatic processing procedures. Adding data to input is easy, just get input and assign value to it. The focus is on how to trigger the commit automatically.

That’s where the Event is used.

2 Familiar events

We use the Event object a lot, usually when the Event is triggered, such as when we click on an element, we pass the Event in, and then we get e.tget, E.currenttarget, e.topPropagation, etc.

Such as:

    <div>
        <p onclick="tagClicked(event)" id="tagP">The test data</p>
    </div>
    
    <script>
        function tagClicked(e) {
            e.stopPropagation();
            console.log(e.target)
        }
    
    </script>

Copy the code

3 events that we may not be familiar with

So let’s think a little bit more about what this Event object is and where it came from. This is of great benefit to our knowledge base.

An Event is the data that comes out of the underlying mechanism when some action takes place, giving the developer space to manipulate and the opportunity to step in and do some processing.

What are the actions through which events are generated?

There are probably the following categories:

  • 1. Triggered by the user, as in the example above, when we click.
  • 2. The underlying API runs outward. For example, when a video starts or pauses, it throws events for us.
  • 3. Trigger by script.

This section focuses on the third case – triggering by script

4 Trigger events using a script

In the example above, we can also trigger with JS without actually clicking, such as:

    document.getElementById('tagP').click();

Copy the code

This is an easy case.

Going back to the opening example, implement it in simple code:

<div>
        <input type="text" vlaue="" id="user" placeholder="Enter a name" onkeydown="keydownClick(event)">
    </div>
 
 <script>
        function keydownClick(e) {
            if(+e.key === 13) {
                console.log(123445556); }}</script>

Copy the code

To clarify: the above code was implemented by someone else, so we can only get input. The goal is to add data to the input 200 times and execute the keydownClick function 200 times without actually hitting enter 200 times yourself.

4.1 How Can I Automatically Trigger the OnKeyDown Event

When we use it in our code, it’s already an instantiated event, but there’s actually a constructor event that we can implement with dispathEvent.

    // Implement one:
    
    function trigger() {
            var ele = document.getElementById('user');
            var event = new Event('keydown', {"bubbles":true."cancelable":false});
            event.key = 13;
            ele.value = 1234;
            ele.dispatchEvent(event);
        }

        trigger();

Copy the code

There are many properties on the Event object that you can look at in detail on the console.

At the same time, there are many different types of events, some of which use a secondary interface based on the Event main interface. The Event itself contains properties and methods that apply to all events.

Among them is the KeyboardEvent associated with keyboard events, which is a constructor that we can instantiate

function trigger() {
    var ele = document.getElementById('user');
    var event = new KeyboardEvent('keydown', {
        key: 13
    });
    ele.value = 1234;
    ele.dispatchEvent(event);
}

Copy the code

This way, it can be triggered more intuitively.

You can take a closer look at the specific documents. This article can be used as a primer. If you are interested, you can take a closer look at the documents on MDN.

The Event Event