The метод addEventListener(). інтерфейсу EventTarget встановлює функцію, яка буде викликатися кожного разу, коли зазначена подія буде доставлена до цільового призначення. Цей метод дозволяє використовувати кілька обробників подій для елемента, що забезпечує динамічне та гнучке керування взаємодією в веб-додатках.
Синтаксис:
element.addEventListener(event, listener, useCapture);>
Параметри:
- подія: подією може бути будь-яка дійсна подія JavaScript. Події використовуються без префіксів, як-от використання click замість onclick або mousedown замість onmousedown.
- слухач (функція обробки): Це може бути функція JavaScript, яка реагує на подію, що відбувається.
- useCapture: Це необов’язковий параметр, який використовується для керування розповсюдженням події. Куди передається логічне значення правда позначає фазу захоплення і помилковий позначає фазу кипіння.
Приклад 1: У цьому прикладі ми відобразимо текст на веб-сторінці після натискання кнопки.
HTML Заголовок документа> голова> <body> <button id='try'>Натисніть тут кнопку><h1 id='text'>h1><script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt="JavaScript addEventListener() із прикладами"><p>JavaScript addEventListener() із прикладами</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <br> <b> <strong>приклад 2:</strong> </b> <span>У цьому прикладі дві події mouseover і mouseout додаються до одного елемента. Якщо на текст наведено курсор, виникає подія наведення миші та викликається функція RespondMouseOver, аналогічно для події mouseout викликається функція RespondMouseOut.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Заголовок документа> голова> <body> <button id='clickIt'>Натисніть тут кнопку><p id='hoverPara'>Наведіть курсор на цей текст !p> <b id='effect'>b><script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('клацніть', RespondClick); y.addEventListener('наведення миші', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); функція RespondMouseOver() { document.getElementById('effect').innerHTML += 'Подія MouseOver' + ' '; } function RespondMouseOut() { document.getElementById('effect').innerHTML += 'Подія MouseOut' + ' '; } function RespondClick() { document.getElementById('effect').innerHTML += 'Подія клацання' + ' '; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt="JavaScript addEventListener() із прикладами"><p>JavaScript addEventListener() із прикладами</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-numpy-ndarray/">Python Numpy-Ndarray</a> </li><li> <a href="/dbms-indexing/">Індексація Субд</a> </li><li> <a href="/ai-blogs/">Блоги Ші</a> </li><li> <a href="/dsa/">DSA</a> </li><li> <a href="/uml-tutorial/">Підручник З Uml</a> </li><li> <a href="/discord/">Розбрат</a> </li><li> <a href="/data-structures/">Структури Даних</a> </li><li> <a href="/floyd-warshall/">Флойд-Воршалл</a> </li><li> <a href="/python-directory-program/">Програма-Каталог Python</a> </li><li> <a href="/coa-tutorial/">Підручник Coa</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Скільки нулів у 10 мільярдах?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Портал інформатики для фанатів. Він містить добре написані, добре продумані та добре пояснені статті з інформатики та програмування, тести та запитання для практичного/конкурентного програмування/співбесіди в компанії.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-many-zeros-10-billion"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/accessor-mutator-java">Аксесор і мутатор в Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/smoke-testing-software-testing">Тестування диму – тестування програмного забезпечення</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sum-function-python">функція sum() у Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-download-install-itunes-linux">Як завантажити та встановити iTunes на Linux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-break-statement">Оператор Java Break</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/alphabet-numbers">abc з цифрами</a>
</li><li><a href="/difference-between-set">набір проти карти</a>
</li><li><a href="/t-flip-flop">t ff</a>
</li><li><a href="/numpy-meshgrid-python">numpy meshgrid</a>
</li><li><a href="/difference-between-protein">це білковий жир</a>
</li><li><a href="/bankers-algorithm-operating-system">"алгоритм банкіра"</a>
</li><li><a href="/java-string-replaceall">java заміна всього</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Всі Права Захищені | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>