Вопрос:

Javascript эквивалентно $ .on

javascript jquery

8105 просмотра

3 ответа

437 Репутация автора

Как человек, который ( к сожалению ) узнал больше, jQueryчем просто сырье, javascript я просто сейчас уделяю время замене всего моего кода на сырье javascript. Нет, это не нужно, но мне легче учиться. Проблема, с которой я сталкиваюсь, заключается в преобразовании всего моего в $(document).onraw javascript. Мой веб-сайт представляет собой «одностраничное приложение», и большая часть моих данных HTMLнаходится в разных файлах, которые вызываются через Ajaxзапросы. Итак, мой вопрос, как бы я искал eventуволенный из динамически загружаемого контента? Я предполагаю, что мне нужно было бы добавить onclickк ним событие, но как получается, что jQueryэто не нужно onclick event?

Автор: Polarize Источник Размещён: 17.06.2015 01:09

Ответы (3)


12 плюса

25910 Репутация автора

Вот Javascript эквивалент дляon()

JQuery

$(document).on('click', '#my-id', callback);

function callback(){
   ...handler code here
}

Javascript

document.addEventListener('click', function(event) {
    if (event.target.id == 'my-id') {
      callback();
    }
});
function callback(){
   ...handler code here
}

При таком подходе идея состоит в том, чтобы использовать event.target . Конечно, по мере изменения селектора ваш код будет становиться все более вовлеченным

Автор: AmmarCSE Размещён: 17.06.2015 01:15

34 плюса

0 Репутация автора

Решение

Привязка обработчиков в нативном API выполняется с помощью addEventListener().

Чтобы эмулировать делегирование событий в jQuery, вы можете довольно легко создать систему, которая использует .matches()метод для проверки выбранного вами селектора.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

Вероятно, необходимо сделать некоторые изменения, но в основном это функция, которая берет элемент для привязки, например document, к типу события, селектору и обработчику.

Он начинается e.targetи пересекает родителей, пока не достигнет связанного элемента. Каждый раз он проверяет, соответствует ли текущий элемент селектору, и, если это так, он вызывает обработчик.

Так что вы бы назвали это так:

delegate(document, "click", ".some_elem", function(event) {
    this.style.border = "2px dashed orange";
});

Вот живая демонстрация, которая также добавляет динамические элементы, чтобы показать, что новые элементы также подобраны.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

delegate(document, "click", ".some_elem", function(event) {
    this.parentNode.appendChild(this.cloneNode(true));
    this.style.border = "2px dashed orange";
});
<div>
  <p class="some_elem">
    <span>
      CLICK ME
    </span>
  </p>
</div>


Вот прокладка, чтобы добавить немного больше поддержки .matches().

if (!Element.prototype.matches) {
  Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;            
    };
}
Автор: user1106925 Размещён: 17.06.2015 01:16

0 плюса

7891 Репутация автора

В современных браузерах вы можете использовать его Element.closest()для упрощения репликации метода jQuery, .on()а также для того, чтобы захватывать всплывающие события от дочерних элементов целевого элемента (нюанс, который пропускают некоторые другие реализации).

const on = (element, event, selector, handler) => {
  element.addEventListener(event, e => {
    if (e.target.closest(selector)) {
      handler(e);
    }
  });
}

on(document, 'click', '#test', e => {
  console.log('click');
});
<button id="test">
  Clickable
  <i>Also Clickable</i>
</button>

Автор: benvc Размещён: 12.06.2019 09:59
Вопросы из категории :
32x32