Почему не получается скопировать обработчик события?

Question

[Вася Ли]

Доброго времени суток. Есть текстовое поле и при вводе текста (событиях keyBoard ) появляется кнопка отправить . Мне очень нужна эта кнопка со всеми слушателями событий. Но имитируя текстовый ввод с помощью :

elem.dispatchEvent(new Event('keypress', {keyCode: 'a'}))

кнопка не появляется, из-за свойства isTrusted .
Пробую создать кнопку из скриптов с теми же значениями, потом скопировать слушателя нужной кнопки (нажимаю любую клавишу чтоб кнопка появилась и потом уже пытаюсь скопировать с нее обработчики) :

let newdiv=document.createElement('div');
newdiv.className='_1gEHKhEcIVXp914tzzgRXP';
newdiv.innerText='SEND';
document.querySelector("._1WepjWULQw18XF_RbW1mDk").appendChild(newdiv)
let newdiv=document.createElement('div');
newdiv.className='_1gEHKhEcIVXp914tzzgRXP';
newdiv.innerText='SEND';
document.querySelector("._1WepjWULQw18XF_RbW1mDk").appendChild(newdiv)
let el=document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP') // обе кнопки
let lis=document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP')[0].onclick // нужный обработчик
newdiv.onclick=lis;

все получается , все ок. Но кнопка не работает. Обработчик копируется и виден во вкладке Event Listeners , но не срабатывает.
Все функции и функции/обработчики спрятаны и когда пытаешься посмотреть на них они возвращают [native code] . Перепробовал все возможные способы, но везде натив код.
Не пойму почему обработчик не срабатывает. Кнопка одна, ф-ию обработчик привязал ту же. Все идентично.

Answer 1

[kocherman]

function simulateClick() {
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  const button2 = document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP')[0]; 
  const cancelled = !button2.dispatchEvent(event);
}
button.addEventListener('click', simulateClick);

https://developer.mozilla.org/en-US/docs/Web/Guide...

Comments

[Вася Ли]

спасибо, но мне нужно именно привязать функцию обработчик на другую кнопку . просто таких кнопок я буду добавлять для каждого диалогового всплывающего окна ,их 300. Вашим методом он будет только одну кнопку все время нажимать и все сообщения будут отправляться в первом всплывающем окне. Да еще и возможно ошибка будет, потому когда отправляется сообщение, сама кнопка исчезает. Она появляется когда текст вводишь . я нажимаю пару клавиш чтоб она появилась чтоб скопировать слушателя, но безуспешно

[kocherman]

Вася Ли, Вы можете симулировать сколько угодно кликов в цикле, хоть 300 штук. А вот получить слушателя определенного не в JS а внутри браузера не получится.

[Вася Ли]

kocherman, так ведь слушатели ставит не браузер , а пользователь и через js . А одну и ту же кнопку вызывать 300 раз это одному пользователю 300 сообщений отправить

[kocherman]

Вася Ли, все слушатели, объявленные через element.addEventListener('click', ...); не будут доступны по element.onclick, особенно, если функция анонимная

[Вася Ли]

kocherman, я пробовал geteventlisteners и смотрел во вкладке event listeners . это единственный слушатель. плюс , он в итоге добавляется на нужную кнопку , но почему-то не выполняется. какие-то аномалии с этим сайтом. после всех манипуляций через консоль получаются две абсолютно идентичные кнопки. но одна работает , а та , что я добавляю нет.

[kocherman]

Вася Ли, а что выводит если сделать вот так:
console.log( ваш_слушатель )?

[kocherman]

Вася Ли, и копировать элементы проще так:
https://developer.mozilla.org/en-US/docs/Web/API/N...

[Вася Ли]

kocherman, все другие слушатели выводят [native code]. а именна этот слушатель пустую функцию f ln(){} .

[Вася Ли]

kocherman, за метод спасибо. не знал. к сожалению тоже не помог. видимо скрипты как-то сами отслеживают и дают свой идентификатор этой кнопке.

[kocherman]

Вася Ли, Да метод cloneNode() копирует только слушателей определенных только через атрибуты тега.

[kocherman]

Вася Ли, nativecode - это тело функции, а я про

let lis=document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP')[0].onclick
console.log(lis);

там точно функция?

[kocherman]

Вася Ли, если выполнить вот так:

document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP')[0].onclick()

что будет?

[Вася Ли]

kocherman, и копия и оригинал не работают. просто возвращают undefined
Если вызывать как метод

document.querySelectorAll('._1gEHKhEcIVXp914tzzgRXP')[0].click()

то оригинал срабатывает

[kocherman]

Вася Ли, но метод click - не является слушателем события и не указывает на него.

[kocherman]

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

[Вася Ли]

kocherman, на кнопке которую я динамисески добавляю клик не приводит к запуску слушателя . Мне все таки кажется что идет всплытие, потом проверка и если элемент нужный, только тогда вызывается обработчик .
Есть возможность посмотреть все переменные , которые ссылаются на элемент ?