Вызов нескольких функций JavaScript в событии Onclick

  1. Передача функций как значений параметру onclick
  2. Использование ненавязчивого JavaScript
  3. Использование && и || Операторы

Мы хорошо знакомы с событием onclick в javascript, которое запускает определенную функцию, передаваемую в качестве значения атрибуту onclick. Событие HTML объектная модель документа (DOM) поддерживается почти для всех элементов HTML, за исключением некоторых, таких как <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> или <title>. Он обычно используется в html-тегах, таких как <div>, <button>, <li>, <span>, <a> и т. Д. Но как мы можем вызвать более одной функции на щелчок <div>, <li> или <button>. Вот несколько способов сделать это.

  • Передача функций как значений в параметр onclick
  • Использование ненавязчивого JavaScript
  • Использование && и || операторы

Передача функций как значений параметру onclick

Наиболее распространенный способ использования атрибута onclick - присвоить функцию в качестве значений onclick. Обычно мы пишем его в коде графического интерфейса пользователя в теге HTML. Чтобы передать несколько функций в качестве значений, перечислите их через точку с запятой в атрибуте onclick этого тега. Его синтаксис следующий.

onclick = "functionA(); functionB();"

Обе функции будут выполняться одна за другой. Например, если мы используем следующий код с функциями functionA() и functionB(), результатом будет последовательное выполнение двух функций в порядке, указанном в значениях.

<div id="output" onclick="functionA(); functionB();"></div>
function functionA() {
    for (let i=0; i<5; i++) {
        console.log(i + " Mars is a planet");
    }
}
function functionB() {
    for (let i=0; i<5; i++) {
        console.log(i + " The sky is blue");
    }
}

Выход:

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Замечания

  • Выполнение нескольких функций с помощью onclick поддерживается во всех веб-браузерах и для большинства элементов HTML. Это аккуратный и лаконичный метод вызова нескольких функций.
  • Выполнение функции последовательное. Следовательно, вы можете спланировать последовательность, в которой должны выполняться вызовы методов, соответствующим образом перечислив функции.
  • Вместо того, чтобы использовать точку с запятой после имени функции, мы также можем разделить их запятой. Это означает, что onclick = "function1(), function2()" также является допустимым синтаксисом.
  • Недостатком является использование нескольких функций, передаваемых в событие onclick. Если какой-либо из методов, переданных в качестве параметров, не работает из-за какого-либо исключения, он разрывает всю цепочку. И все следующие за ним функции выполняться не будут.
  • Использование onclick в тегах делает код читабельным. Мы не манипулируем, DOM не манипулируем. Это означает, что мы указываем функции статически в HTML. Следовательно, мы не добавляем никаких функций к событию onclick элемента DOM во время выполнения. Браузер анализирует HTML и может связать события щелчка на этапе анализа.

Использование ненавязчивого JavaScript

Другой способ передать функции в onclick в JavaScript - это добавить слушателей onclick в код JavaScript. В этом методе мы находим целевой элемент и связываем нашу функцию с событием onclick этого элемента. Ненавязчивый подход - это способ программирования, при котором мы храним события javascript в коде js, а HTML включает только статическую страницу (для получения дополнительной информации см. Здесь). Ниже приведен ненавязчивый способ вызова нескольких функций для события щелчка.

let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);

Выход:

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Замечания

  • Функции выполняются последовательно, но не зависимо. Следовательно, если функция не выполняется, остальные функции не блокируются, в отличие от случая onclick="functionA(), functionB()".
  • С помощью этого метода мы можем добавить несколько функций. Чтобы удалить уже добавленную функцию динамически, нам нужно использовать removeEventListener. Синтаксис следующий.
element.removeEventListener('click', alertFirst);
  • Будет сложно отлаживать функциональность, так как HTML не будет отображать функции, связанные с onclick элемента HTML. Методы сопоставляются с событием onclick во время выполнения при компиляции кода javascript.
  • Этот метод добавления onclick во время выполнения дает гибкость для интеллектуального выполнения функций на основе бизнес-логики, поскольку ассоциация выполняется на этапе компиляции во время выполнения.

Использование && и || Операторы

Можно включить несколько функций, разделенных && и || операторы. Функции должны иметь логический тип возврата. Обычно мы используем этот подход, когда необходимо определиться с некоторыми условиями, а затем выполнить намеченную функцию. Если эти условия требуют сложных или длительных логических проверок, желательно создавать их как функции и хранить в коде js, чтобы сделать HTML компактным и читабельным. Следующий код подробно описывает использование.

<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>
function isValidPage(pageNumber) {
    let pageNum = parseInt(pageNumber);
    let maxPagesCount = 10;
    let isValidPageNumber = false;
    if (!isNaN(pageNum)) {
        if (pageNum > 1 && pageNum < maxPagesCount) {
            isValidPageNumber = true;
        }
    }
    return isValidPageNumber;
}

function fetchPageDetails(pageNumber) {
    // Call Backend service to get the detils
}

В приведенном выше коде функция fetchPageDetails() будет вызываться только после того, как функция isValidPage() вернет true. По сути, оператор && обеспечивает выполнение функции fetchPageDetails() только в том случае, если pagenumber действителен.

Замечания

  • В этом методе выполнение функций последовательное. Он следует логике как код с использованием && и || операторы. Если метод не работает из-за исключений, он не выполняет остальные функции.
  • Мы можем использовать этот метод в случаях, когда у нас есть функции с логическими типами возврата или типами, которые соответствуют логическому оператору, используемому в коде.
  • Поскольку мы указываем функции в атрибуте click элемента HTML, этот метод представляет собой статический способ объявления нескольких функций. Мы не делаем никаких ассоциаций во время выполнения.

Сопутствующая статья - JavaScript Event

  • Событие изменения размера окна в JavaScript