Dosant

<select id="tags-select">
    <option value="политика" selected>Политика</option>
    <option value="музыка" selected>Музыка</option>
    <option value="спорт">Спорт</option>
  </select>
  
<p id="tags-text"><p>

Dosant

<input id="my-input" type="text" value="Text">
<button id="clear-button">Clear</button>
<p id="my-p">Text</p>


<input id="my-checkbox" type="checkbox">
<p id="checkbox-text"></p>

Dosant

/* Пример c делегированием */
var articleListNode = document.querySelector('.article-list');
articleListNode.addEventListener('click', handleDeleteBtnClick);

function handleDeleteBtnClick(event) {
    /* 
      event.target это что угодно внутри .article-list, 
      надо проверить, что event.target это именно наша кнопка
    */  
    if (event.target.tagName !== 'BUTTON') {

Dosant

<div class="article-list">
  <article>Статья №1 <button>x</button></article>
  <article>Статья №2 <button>x</button></article>
  <article>Статья №3 <button>x</button></article>
  <article>Статья №4 <button>x</button></article>
  <article>Статья №5 <button>x</button></article>
</div>

Dosant

function handleEvent(event) {
  alert(event.currentTarget);
  event.stopPropagation(); /* Прекратить всплытие */
}

var form = document.querySelector('form');
var div = document.querySelector('div');
var p = document.querySelector('p');

form.addEventListener('click', handleEvent);

Dosant

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

Dosant

<input id="my-input" type="text" value="Text">
<button id="clear-button">Clear</button>
<p id="my-p">Text</p>

Dosant

/* Получили кнопки как HTML-Element*/
var button = document.getElementById('my-button');

/* Функция, которую назначим обработчиком */
function handleClick() {
  console.log('Хендлю клик');
}

/* Прикрепляем обработчика на событие 'click' */
button.addEventListener('click', handleClick);

Dosant

<label>Кликни меня <input type="checkbox"></label>

Dosant

<table>
  <tr>
    <td>
      <label for="agree">Согласен с правилами</label>
    </td>
    <td>
      <input id="agree" type="checkbox">
    </td>
  </tr>
  <tr>