How to call multiple JavaScript functions in onclick event?

后端 未结 11 795
梦如初夏
梦如初夏 2020-11-22 06:25

Is there any way to use the onclick html attribute to call more than one JavaScript function?

相关标签:
11条回答
  • 2020-11-22 07:08

    One addition, for maintainable JavaScript is using a named function.

    This is the example of the anonymous function:

    var el = document.getElementById('id');
    
    // example using an anonymous function (not recommended):
    el.addEventListener('click', function() { alert('hello world'); });
    el.addEventListener('click', function() { alert('another event') });
    

    But imagine you have a couple of them attached to that same element and want to remove one of them. It is not possible to remove a single anonymous function from that event listener.

    Instead, you can use named functions:

    var el = document.getElementById('id');
    
    // create named functions:
    function alertFirst() { alert('hello world'); };
    function alertSecond() { alert('hello world'); };
    
    // assign functions to the event listeners (recommended):
    el.addEventListener('click', alertFirst);
    el.addEventListener('click', alertSecond);
    
    // then you could remove either one of the functions using:
    el.removeEventListener('click', alertFirst);
    

    This also keeps your code a lot easier to read and maintain. Especially if your function is larger.

    0 讨论(0)
  • 2020-11-22 07:14

    Sure, simply bind multiple listeners to it.

    Short cutting with jQuery

    $("#id").bind("click", function() {
      alert("Event 1");
    });
    $(".foo").bind("click", function() {
      alert("Foo class");
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="foo" id="id">Click</div>

    0 讨论(0)
  • 2020-11-22 07:16

    ES6 React

    <MenuItem
      onClick={() => {
        this.props.toggleTheme();
        this.handleMenuClose();
      }}
    >
    
    0 讨论(0)
  • 2020-11-22 07:17

    I would use the element.addEventListener method to link it to a function. From that function you can call multiple functions.

    The advantage I see in binding an event to a single function and then calling multiple functions is that you can perform some error checking, have some if else statements so that some functions only get called if certain criteria are met.

    0 讨论(0)
  • 2020-11-22 07:17

    You can compose all the functions into one and call them.Libraries like Ramdajs has a function to compose multiple functions into one.

    <a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>
    

    or you can put the composition as a seperate function in js file and call it

    const newFunction = R.compose(fn1,fn2,fn3);
    
    
    <a href="#" onclick="newFunction()">Click me To fire some functions</a>
    
    0 讨论(0)
  • 2020-11-22 07:20

    var btn = document.querySelector('#twofuns');
    btn.addEventListener('click',method1);
    btn.addEventListener('click',method2);
    function method2(){
      console.log("Method 2");
    }
    function method1(){
      console.log("Method 1");
    }
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Pramod Kharade-Javascript</title>
    </head>
    <body>
    <button id="twofuns">Click Me!</button>
    </body>
    </html>

    You can achieve/call one event with one or more methods.

    0 讨论(0)
提交回复
热议问题