event

After we bind an event handler to an element and the event fires, we get the desired interaction with the web page. Leaving event listeners aside, there are two ways to bind event handlers:

1. Bind event handlers using HTML

<a href="" onclick="fo()">hello</a>
    <script>
        function fo(){
            alert('Hello World! ')}</script>
Copy the code

This is similar to writing CSS styles by setting inline styles directly using the style property of the tag. This makes the code look messy and violates the principle of separating the code that implements dynamic behavior from the code that displays the static content of the document.

2. Bind event handlers in JavaScript

If you assign an event handler in JavaScript, you first get a reference to the object to process, and then assign the function to the corresponding event handler property.

<button id="mylink"></button>
<script>
        var link = document.getElementById("mylink");
        link.onclick = function () {
            alert("Hello World !");
        };
</script>
Copy the code

But when we want to trigger multiple methods on the same object using onclick, the latter method overwrites the previous one and only executes the last bound method. However, event listeners are not limited to binding only one event to an element.

3. event listeners

In terms of event listening, Netscape originally developed an event-driven mechanism for JavaScript (event capture). IE followed suit with its own event-driven mechanism (event bubbling). Finally, W3C defines two event mechanisms, namely capture phase, target phase and bubble phase. Before IE8, IE had always insisted on its own event mechanism (compatibility problem for front-end staff), and after IE9, IE also supported the W3C specification.

Internet Explorer (Internet Explorer 9 or lower) :

element.attachEvent(onevent,function);
Copy the code
  • event: Indicates the event type. You must add on before the event type.
  • function: Specifies the function to execute when the event is fired.

Note that the handler call registered with attachEvent refers to an element that is no longer the previously bound event; this is the Window object.

Browsers that support W3C standard event listeners:

  • event: Event type name. Unlike IE, the event type name is not preceded by ‘on’.
  • function: Specifies the function to execute when the event is fired.

– Boolean: Specifies whether the event is called in the capture or bubble phase. The default value is false, and true indicates the capture phase. False indicates the bubbling phase.

Encapsulates a compatible binding event listener function:

<body>
    <button id="btn">submit</button>
    <script>
            var btn = document.getElementById("btn");
            /*IE*/
            if(btn.attachEvent){
                btn.attachEvent("onclick".function(){
                     alert("hello world -- IE");
                });
                    
            /*W3C*/
            }else{
                btn.addEventListener("click".function(){
                     alert("hello world -- w3c"); })}</script>
</body>
Copy the code