Как вызвать два метода для метода onclick кнопки в HTML или JavaScript?

Question

Как вызвать два метода для метода onclick кнопки в HTML или JavaScript?

Answer 1

1. Попробуйте:

   <input type="button" onclick="function1();function2();" value="Call2Functions" />
   

2. Или вызовите вторую функцию в конце первой функции:

      function func1(){
        //--- some logic
        func2();
      }
   
      function func2(){
       //--- some logic
      }
   

   ...и вызовите func1 () по нажатию кнопки:

   <input type="button" onclick="func1();" value="Call2Functions" />
   

Answer 2

Как сказал Гарри Джой, вы можете сделать это на атрибуте onclick следующим образом:

<input type="button" onclick="func1();func2();" value="Call2Functions" />

Или в вашем JS вот так:

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1();
    func2();
};

Или, если вы назначаете onclick программно, и не уверены, что существовал предыдущий onclick (и не хотите его перезаписывать):

var Call2FunctionsEle = document.getElementById( 'Call2Functions' ),
    func1 = Call2FunctionsEle.onclick;

Call2FunctionsEle.onclick = function()
{
    if( typeof func1 === 'function' )
    {
        func1();
    }
    func2();
};

Если вам нужны функции, запускаемые в области элемента, по которому щелкнули, можно использовать простое применение:

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1.apply( this, arguments );
    func2.apply( this, arguments );
};

Answer 3

Современный метод обработки событий:

element.addEventListener('click', startDragDrop, false);
element.addEventListener('click', spyOnUser, false);

Первый аргумент - это событие, второй - функция, а третий указывает, разрешать ли всплытие событий.

С QuirksMode :

Спецификация W3C DOM Level 2 Event уделяет пристальное внимание проблемам традиционной модели. Он предлагает простой способ зарегистрировать любое количество обработчиков событий для одного и того же события на одном элементе.

Ключом к модели регистрации событий W3C является метод addEventListener(). Вы даете ему три аргумента: тип события, функцию, которую нужно выполнить, и логическое значение (true или false), которое я объясню позже. Чтобы зарегистрировать нашу хорошо известную функцию doSomething () при нажатии на элемент, который вы делаете:

Полная информация здесь: http://www.quirksmode.org/js/events_advanced.html

Использование jQuery

если вы используете jQuery, есть хороший API для обработки событий:

$('#myElement').bind('click', function() { doStuff(); });
$('#myElement').bind('click', function() { doMoreStuff(); });
$('#myElement').bind('click', doEvenMoreStuff);

Полная информация здесь: http://api.jquery.com/category/events/

Answer 4

<input type="button" onclick="functionA();functionB();" />

function functionA()
{

}

function functionB()
{

}

Answer 5

Привет

Вы также можете сделать, как показано ниже ... Таким образом, обе ваши функции должны вызывать, и если обе функции возвращают true, тогда он возвращает true, иначе возвращает false.

<input type="button" 
     onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}" 
     value="Call2Functions" />

Спасибо, Вишал Патель