Brief set of JavaScript event handlers / event listener

Here are some ways to deal with the setting of the event.

Specified as attributes of HTML elements (event handler)
Designated a DOM element attribute (event handler)
() Specified (event listeners) by EventTarget.addEventListener

Next, will be briefly described a variety of ways.

First, specify the attributes to HTML elements

The event handler for the specified HTML element attribute is one of the most simple way of setting event handlers.

<a id="test" href="https://www.baidu.com" onclick="alert('bar');alert('baz')">百度一下</a>

If you include multiple event handlers are separated by semicolons. Of course, another way in advance then execute the function After you define a function there will not be a problem.

<body id="bo">
    <a id="test" href="https://www.baidu.com" onclick="f()">百度一下</a>
<script>
    function f() {
        window.alert("page transfer");
        return true;
    }
</script>

If the event handler returns a false value, the default behavior of the event will be canceled. In the following example, the event refers to a hyperlink to jump event.

<body id="bo">
    <a id="test" href="https://www.baidu.com" onclick="return f()">百度一下</a> <!--onclick="return f()" 将onclick视为函数-->
<script>
    function f() {
        window.alert("page transfer");
        return false;
    }
</script>

Second, as specified DOM element attribute

If a page uses an HTML file separately and JavaScript files, you should use as little JavaScript code in the HTML file in order to improve maintenance. Therefore, it is best to set the event handlers are all written in JavaScript.

Event handlers can be specified as an attribute node.

< Body ID = "BO" > 
    < A ID = "Test" the href = "https://www.baidu.com" > Baidu, </ A > 
< Script > 
    var doIt = document.getElementById ( ' Test ' );
     function F () { 
        window.alert ( ' STOP Page Transfer ' );
         return  false ;    / * Similarly, the hyperlink will not return false achieve jump * / 
    } 
    doit.onclick = F;
 </script>

Note that the event handler is set, like the first two ways are wrong.

    doit.onclick = f (); // get the return value of the function 
    doit.onclick = "f ()"; // pure string assignment 
    doit.onclick = f; // correct, a reference function is obtained

If a property has been specified HTML event handler designated a DOM element attributes, content attributes in HTML notes will be overwritten. To achieve this more "specified" function requires the use of event listeners.

III () specified by EventTarget.addEventListener

If you can only specify one treatment operation, then it is difficult to deal with complex behavior. To compensate for this shortcoming, we defined EventTarget.addEventListener () method in the DOM Level2.

<body id="bo">
    <a id="test" href="https://www.baidu.com">百度一下</a>
<script>
    var doit = document.getElementById('test');
    function f() {
        window.alert('stop page transfer');
        return true;
    }
    function a(){
        window.alert('HelloWorld');
        return  to true ; 
    } 
    doit.addEventListener ( ' the Click ' , F, to false ); / * The first parameter is a registered event, the second parameter is registered event handler, the third parameter is not introduced * / 
    doit.addEventListener ( ' the Click ' , A, to false ); / * register multiple listeners * / 
</ Script >

Brief set of JavaScript event handlers / event listener

Guess you like