Как выполнить одну и ту же функцию для нескольких обработчиков событий на нескольких селекторах?

Question

Позвольте, есть три элемента, где я назвал myFunc(); следующим образом:

$('table').on('click', 'a', function() {
   myFunc();
});

$('.myClass').on('hover', 'p', function() {
   myFunc();
});

$('select').on('change', function() {
   myFunc();
});

Есть ли способ объединить все обработчики для всех множественных селекторов, чтобы выполнить одну и ту же функцию, так что я будубыть в состоянии звонить myFunc(); один раз вместо трех?

Answer 1

Нет, не совсем.Однако, чтобы получить более понятный код, вы должны пойти с:

$('table').on('click', 'a',  myFunc());

$('.myClass').on('hover', 'p', myFunc());

$('select').on('change', myFunc());

Answer 2

Для одного и того же события вы можете использовать несколько селекторов, но для другого события вы должны использовать другой селектор, хотя вы могли бы использовать первый подход, но щелчок сработает перед событием изменения.

$('table a, .myClass p, select').on('click change', function() {
   myFunc();
});

$('select').on('change', function() {
   myFunc();
});

function myFunc(){
console.log('clicked')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th><a>head</a></th></tr>
</table>
<div class="myClass"><p>My Class</p></div>
<select>
<option>1</option>
<option>2</option>
</select>

Answer 3

Вы можете строить свои события:)

let myFuncObjects = { 'table': Array( 'click', 'a' ), '.myClass': Array( 'hover', 'p' ), 'select' : Array( 'change' ), };

function buildEvent(myFuncObjects){
    for (var key in myFuncObjects) {
        let childSel = myFuncObjects[key][1] ? myFuncObjects[key][1]+', ': '';
        $(key).on(myFuncObjects[key][0], childSel, function(){

            myFunc();

        })
    }
}

buildEvent(myFuncObjects);

Answer 4

$('table').on('click', 'a', function() {
  myFunc("a");
});

$(".myClass").hover(function() {
  myFunc("p");
});

$('select').on('change', function() {
  myFunc("select");
});

var myFunc = function(type) {
  console.log(type, "tag called");
};

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Example Table</h2>
<table>
  <tr>
    <th>A Tag</th>
    <th>P Tag</th>
    <th>Select Tag</th>
  </tr>
  <tr>
    <td><a href="javascript:void(0)">Alfreds Futterkiste</a></td>
    <td>
      <p class="myClass">Maria Anders</p>
    </td>
    <td>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
  </tr>
</table>