タグの取得

document.querySelector('p') // 最初の一つ
document.querySelectorAll('p') // 全て

例 CSSのような指定でタグを取得することができます

const header = document.querySelector('#header')
const item = document.querySelectorAll('.item')

ページに存在するそのタグが全て入った配列として返ってきます。

タグにイベントを設定する

el.addEventListener('click', function);

例

const el = document.querySelector('h1')
el.addEventListener('click', clickEvent);

function clickEvent() {
  // クリック時の処理
}

click部分に入るコードはいくつかあります
使用用途が多いものを下記に書きました

[デモ] タグの取得とイベントの設定

マウス

イベント	タイミング
click	クリックしたとき
scroll	ウィンドウをスクロールをしたとき
resize	ウィンドウをリサイズしたとき

キー

イベント	タイミング
keydown	キーを押したとき
keypress	キーが押されているとき
keyup	キーを離したとき

フォーム

イベント	タイミング
blur	フォーカスが外れたとき
focus	フォーカスされたとき

フォーカス

イベント	タイミング
change	inputの値を変更したとき

ウィンドウ

イベント	タイミング
scroll	ウィンドウをスクロールをしたとき
resize	ウィンドウをリサイズしたとき