В чем разница между событием элемента и извлечением события из элемента в dom? - PullRequest
Новая
       37

В чем разница между событием элемента и извлечением события из элемента в dom?

0 голосов
/ 20 апреля 2019

Я хочу понять, когда я щелкаю элемент dom, затем происходит событие click для этого элемента и вызывается связанная с ним функция обработчика событий. Это основной пример асинхронной функции. Мой вопрос связан с реализацией этого. Когда мы нажимаем на любой элемент dom на экране пользователя, происходит событие click В чем разница между случаем события на элементе и передачей события элементом? Бывают и испускаются одно и то же? Если нет, то в чем разница?

Также, когда мы регистрируем функцию обратного вызова, где они хранятся в памяти? Я не спрашиваю о цикле обработки событий здесь (основной стек и очередь обратного вызова).

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

1 Ответ

0 голосов
/ 21 апреля 2019

Ух ты, много вопросов сразу.Хе-хе, мета парни не понравится!Но это также потребует подробного и подробного ответа.

В чем разница между событием события на элементе и отправкой события элементом?

Эта разница не является обычной [пока].Так что это в основном вытекает из моих собственных наблюдений, и я думаю, что немногие не согласятся со мной.

Происходят и испускаются одно и то же?

Если нет, то в чем разница?

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * * * * * * * * * * * * * * * * * * * * * * * * * * * *end, hover, щелчок правой кнопкой мыши и т. д. *

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

ПРИМЕР:

Следующий код присоединяет слушателя к событию click. 

const actionable = document.querySelector( 'button[type="button"]' );

actionable.addEventListener( 'click', () =>
{
    alert( 'Clicked me' );
});
<button type="button" class="click-me">
  Click me
</button>

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

Теперь веб-браузеры гарантируют, что при нажатии пользователем запускается событие click, а API DOM гарантирует, что нашобратный вызов выполнен. Это случай пользователя, который его запустил.

Однако мы все еще можем имитировать это поведение, не нажимая пользователя. 

const actionable = document.querySelector( 'button[type="button"]' );
const actionableState = document.querySelector( 'button[type="button"] > span' );

const hoverable = document.querySelector( 'div.hover-me' );
const hoverableState = document.querySelector( 'div.hover-me > span' );

let count = 0;

actionable.addEventListener( 'click', () =>
{
    actionableState.innerText = ++count;
});

hoverable.addEventListener( 'mouseenter', () =>
{
    hoverableState.innerText = 'Hovered';
    
    const event = new Event( 'click' );
    
    actionable.dispatchEvent( event );
});

hoverable.addEventListener( 'mouseout', () =>
{
    hoverableState.innerText = '-';
});
.click-me > span {
    font-style: italic;
}
.click-me > span:before { content: '[ '; }
.click-me > span:after { content: ' time(s) ]'; }

.hover-me {
    padding: 3em;
    margin: 1em 0;
    text-align: center;
    border-radius: 3px;
    background-color: red;
    display: inline-block;
}
<button type="button" class="click-me">
    Click me <span>0</span>
</button>

<div class="hover-me">
    Hover me, please
    <br/>
    <span>-</span>
</div>

Когда пользователь наводит курсор на поле, мы моделируем событие click.Мы создаем искусственное событие щелчка, и мы испускаем it (dispatchEvent()). Это 'в основном события, генерирующие события.

Где они хранятся в памяти?

Да, в памяти.Когда страница умирает (или закрывается) или происходит сбой среды выполнения JS, все они исчезают.

Как сопоставляется событие с соответствующей функцией обратного вызова?

Эта реализация-зависимая.Если вы действительно хотите увидеть, как этого достичь, вы можете проверить эту реализацию API событий : это TypeScript, но вам не составит труда это сделать. (я признаю, что в коде есть куча комментариев) .Но пока я использовал WeakMap, другие реализации полагаются на карту объектов + массив или событие Set.

Если нет, то в чем разница?

Внутренняя разницамежду событием, которое произошло, и событием, созданным вручную, находится в атрибуте isTrusted (логическое значение), равном true, когда событие инициируется действием / вводом пользователя, и false в противном случае.Это задокументировано здесь .

...