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> <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> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/java-design-patterns/">Патерни Проектування Java</a> </li><li> <a href="/queue/">Черга</a> </li><li> <a href="/dbms/">Dbms</a> </li><li> <a href="/dfs/">Дфс</a> </li><li> <a href="/commerce-types/">Комерція - Види</a> </li><li> <a href="/java-object-oriented/">Java-Object Oriented</a> </li><li> <a href="/how-install/">Як Встановити</a> </li><li> <a href="/javascript-underscore/">Javascript - Underscore.js</a> </li><li> <a href="/c-file-handling/">Обробка C-Файлів</a> </li><li> <a href="/square-root/">Квадратний Корінь Із</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Чистий капітал Дани Вайт у 2024 році (зарплата, будинок і автомобілі генерального директора UFC)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Статок Дани Вайт у 2024 році оцінюється в 500 мільйонів доларів. Він є генеральним директором і президентом UFC і отримує 20 мільйонів доларів на рік.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/dana-white-net-worth-2024-ufc-ceo-s-salary"> <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="/binary-indexed-tree-range-updates-and-point-queries">Бінарне індексоване дерево: оновлення діапазонів і запити точок</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-use-rin-c">Яке використання '
' у C?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/node-js-tutorial/">Підручник Node.js</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-void">JavaScript:void(0)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-date">Рядок Java на сьогоднішній день</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="/c-functions">функції в c</a>
</li><li><a href="/java-string-contains">string.contains java</a>
</li><li><a href="/get-current-date-time-java">java отримати поточний час</a>
</li><li><a href="/identifiers-java">дійсні ідентифікатори java</a>
</li><li><a href="/java-do-while-loop">java do while</a>
</li><li><a href="/how-sort-an-array-java">сортувати масив java</a>
</li><li><a href="/alpha-beta-pruning">приклад обрізки альфа-бета</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="//fi.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>