This is the 26th day of my participation in the August More Text Challenge

Event handler

An event is an action performed by a user or browser. We commonly click, scroll viewport, mouse slide are events, the function called in response to the event is called the event handler, in JS event handler name starts with on.

HTML Event handling

We all know that JS code can also be written inside HTML element tags. Let’s write a little chestnut.

 <button onclick="alert('jackson')"> Click show my name </button> //jackson
Copy the code

So when I click on the button it will pop up a warning box to display my name. Notice that when we define onclick we use double quotation marks “”, we use single quotation marks in the output, and if we use double quotation marks we will get an error. If we use double quotation marks we can use an escape character or an & to represent the quotation marks.

Currently, js can also be written to a script tag, so let’s modify this code.

 <button id="btn"   onclick="sayName('jackson')"</button><script>
   function sayName(name) {
       alert(name) //jackson
   }
</script>
Copy the code

In this case, the sayName method can also be reused a little bit by passing the name as an argument. This is often used because too much logic can make HTML pages less readable.

DOM event handling

The DOM2 specification defines two methods for event handlers, one to assign addEvenTListener() and the other to remove removeEventListener(). These methods take three parameters, the event name, the event handler, and a Boolean value. A Boolean value of true indicates execution in the capture phase and false(the default) indicates execution in the bubble phase.

For those unfamiliar with capturing and bubbling, take a look at the JavaScript event stream (juejin. Cn)

Let’s rework our example.

<button id="btn"</button>let btn = document.getElementById('btn');
btn.addEventListener('click'.function() {
    alert('jackson') //jackson
})
Copy the code

Doesn’t that make it look a little bit bigger. Note that methods added this way can only be removed by the accompanying removeEventListener method. We can’t remove it because the second argument is an anonymous function. We need to wrap it up.

let btn = document.getElementById('btn');
let sayName = function() {
    alert('jackson')
}
btn.addEventListener('click',sayName,false);

/ / remove
btn.removeEventListener('click',sayName,false);
btn.sayName; / / no show
Copy the code

It’s a little convoluted, but usually we use this to do some interception, such as interception in the capture phase, adding other operations or methods.

Ie Event Processing

Internet Explorer also has a method similar to the DOM2 specification, attachEvent() and detachEvent(). Note that these methods accept two arguments. They do not support capture operations, so they only accept event handler names and functions.

let btn = document.getElementById('btn');
btn.attachEvent("onclick".function(){
    alert('jackson');
})
Copy the code

Notice we used click and we’re going to change it to onclick. That’s how much fun IE is.

If you want to be compatible you can encapsulate a generic method. I’m just going to go ahead and define JacksonEventUtil, and I’m just going to call add and remove.

var JacksonEventUtil = {
        add: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on"+ type] = handler; }},remove: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null; }}};Copy the code