5

Есть ли в javascript аналог для перегрузки функции из jQuery?

.on(eventName, selector, handler)

Интересует именно перегрузка с селектором. То есть есть родительский элемент и дочерний, который формируется динамически. Если сделать просто querySelector, то в тот момент элемента может и не быть.

2
  • document.getElementById('someId').onclick = function() {} - это? Подробнее можно здесь почитать. Если надо добавить несколько обработчиков, то можно как-то так: var oldHandler = element.onclick; element.onclick = function() { ... oldHandler(); }
    – BOPOH
    29 окт 2015 в 10:38
  • Интересует именно перегрузка с селектором. То есть есть родительский элемент и дочерний, который формируется динамически. Если сделать просто querySelector, то в тот момент элемента может и не быть.
    – Igor
    29 окт 2015 в 11:20

4 ответа 4

1

Для одного родительского написал, для нескольких надо будет обернуть в цикл.
Ну и кроссбраузерность closest не очень - вероятно, придётся подключить полифилл.

document.querySelector("main").addEventListener('click', function (e) {
  if (e.target.closest("p")) {
    console.log("clicked " + e.target.outerHTML);
  }
})
main :hover { background: rgba(255, 0, 0, .25) }
<main>
  <div>123 <span>span <em>em</em></span></div>
  <p>456 <span>span <em>em</em></span></p>
  <section>789 <span>span <em>em</em></span></section>
</main>

0
document.querySelector('#id').addEventListener('click', function () {
    alert('addEventListener');
}, false);

https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener

2
  • Интересует именно перегрузка с селектором. То есть есть родительский элемент и дочерний, который формируется динамически. Если сделать просто querySelector, то в тот момент элемента может и не быть.
    – Igor
    29 окт 2015 в 10:52
  • @Igor В jQuery вешается обработчик на родительский элемент который существует, а вторым агрументом передают элемент что будет добавлен динамически. После каждого возникновения события на этом родительском элементе проверяется event.target...
    – Alexandr
    25 апр 2016 в 6:58
0

Не совсем понятно, что именно вы сделали и что у вас не получается, потому что и при помощи чистого js и при помощи jquery вы функции вешаете в момент вызова. Поэтому вам в любом случае либо вызывать ваши функции заново, либо вешать событие на родителя примерно так:

var container = document.getElementById("container");
// Отслеживаем клик на родителе
container.addEventListener("click", function(event) {
  //   останавливаем всплытие
  event.stopPropagation();
  var clicked = event.target;
  //   Проверяем наличие нужного нам класса на элементе
  //   по которому кликнули внутри родителя
    if (clicked.closest(".element")) {
    alert("Клик");
  }
});

var create = document.getElementById("create");

// Создаем новые элементы по клику на кнопку
create.addEventListener("click", function(event) {
  var newElements = document.createElement("div");
  newElements.innerHTML =
    '<div class="block"></div><div class="element element_new">клик вызовет событие</div>';
  container.appendChild(newElements);
});
.container {
  text-align: center;
}

.btn {
  display: inline-block;
  margin-bottom: 20px;
}

.element {
  height: 30px;
  background-color: orange;

  line-height: 30px;
  cursor: pointer;
}

.element_new {
  background-color: rgb(39, 156, 145);
}

.element:hover {
  background-color: red;
}

.block {
    height: 30px;
  background-color: #000;
}
<div id="container" class="container">
  <button id="create" class="btn">Создать еще элементов</button>
  <div class="element">клик вызовет событие</div>
  <div class="block"></div>
  <div class="element">клик вызовет событие</div>
</div>

-1

У меня получилось такое:

document.addEventListener('click', {
    handleEvent: function(eve) {
    var matches = document.querySelectorAll(this.selector);
        if (Array.from(matches).indexOf(eve.target) != -1) {
        log(eve.target.textContent);
    }
    },
  selector: '.example2'
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.