カテゴリー
未分類

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の対応状況は不明である

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA