塩焼きブログ

塩焼きに関しての研究内容を公開しています

jQueryのclick時のアクションを生のJavaScriptのみで実現する

jQuery$(element).click()は生のJavaScriptでもaddEventListener()を使って実現できる。例えば下記のようなリストのあるHTMLがあるケース。

<html>
<head>
  <title>Title</title>
</head>
<body>
  <ul>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
    <li>List4</li>
    <li>List5</li>
  </ul>
</body>
</html>

このようにクリックしたらスタイルを変更するといった処理が実現できる。jQueryを使えばもっとシンプルに記述できるわけではるが、jQuery使用禁止の場面で有効である。

var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i ++) {
  list[i].addEventListener('click', function() {
    this.style.color = '#ff0000';
  })
}

ただしIEの対応状況は不明である