前回こちらの記事で、【Javascript】即時関数とFunctionコンストラクタ、関数宣言、関数式についてJavascriptの関数について学習しました。
基本的には、関数式の形態を使用することや、他のコードを汚染しないために、即時関数をいう手法もあることを知りました。
しかし、まだまだ分からないことばかりです。
今回はソースコードの中にあった、addEventListenerについて学習したいと思います。
ソースコードは前回と変わらず以下のとおりです。
今回はCSSのコードは省略しています。
<!DOCKTYPE html>
<html lang = 'ja'>
<head>
<meta charset = 'utf-8'>
<title>Comment Form</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<div class='container'>
<textarea id='comment' placeholder = 'your comment here'></textarea>
<div class='btn'>Submit</div>
<p><span id='label'>30</span>characters left</p>
</div>
<script src= "js/main.js"></script>
</body>
</html>
(function(){ //即時関数
'use strict';
var comment = document.getElementById('comment');
var label = document.getElementById('label');
var LIMIT = 30;
var WARNING = 10;
label.innerHTML = LIMIT;
comment.addEventListener('keyup',function(){ //addEventListenerとはなんなのか
var remaining = LIMIT - this.value.length;
label.innerHTML = remaining;
if(remaining<WARNING){
label.className = 'warning';
} else{
label.className = '';
}
})
})();
##基本：イベントとは
まず、イベントとはなんなのかという話です。
Qiita:イベントを参考にしてみると、イベントとは、簡単に言うと、何かをしたときに関数が実行されることを指します。
例えば、ボタンをおしたときに色が赤くなるとか、カーソルを上に置いたときにアラートが出てくるとか様々です。
よく使われるイベントたちは
- onload(読み込みが終わったとき)
- onclick(マウスをクリックしたとき)
- onkeyup(キーボードのキーを離したとき)
こういうのがあります。
調べたらいろいろ書いてあるサイトを見つけることができます。JavaScriptのイベントハンドラ一覧
そして、このコードをいかにして使うかというと、JavaScript初級者から中級者になろう三章第一回 イベントプロパティを参考にします。
簡単にですが、引用します。
###HTML要素にイベントに対応した属性をつける
以下のようにHTML要素にonclickイベントを直接つける方法。こうすると、クリックしたときに特定のイベントを起こすことができます。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<p onclick="console.log('click');">test</p>
</body>
</html>
もしくは別の場所に関数を作ってそれを呼び出す。
<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
function aaa(){
console.log('aaa!');
}
</script>
</head>
<body>
<p onclick="aaa();">test</p>
</body>
</html>
どちらも、HTMLの要素に直接書いている形になります。
###イベントプロパティ：JavaScriptから上のイベントを操作する
Javascriptに関数を記述して、その関数を呼び出すことでイベントを起こすこともできます。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<p id="abcd">test</p>
<script type="text/javascript">
function aaa(){
console.log('aaa!');
}
var p = document.getElementById('abcd'); //要素pを取得
p.onclick = aaa;
//onclickに関数aaaを代入することで、onclickを実行すると関数aaaが実行される
//onclickをイベントプロパティという
</script>
</body>
</html>
しかし、これには欠点があります。
同時に２つ以上のイベントを起こすことができないということです。
まるまる引用ですが、、
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id='box'>This is box</div>
<button id='btn'>box</button>
<script type="text/javascript">
window.onload = function() {
//要素を取得
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 背景色を赤くするイベント
btn.onclick = function() {
box.style.backgroundColor = 'red';
};
// クリックしたらアラートを出す
btn.onclick = function() {
alert('clicked');
};
};
</script>
</html>
この結果は一つ目の背景色を赤くするイベントは上書きされてイベントとして出てきません。
それを解決し、同時に２つ以上のイベントを発生させることができるのがAddEventLisrenerということです。
###addEventListenerの書き方
対象の要素.addEventListener(何か起きたら, 何かする, false);
↓つまり
オブジェクト.addEventListener('イベント名',function(){処理内容},false)
// falseは省略可能であると書いてあるサイトもあります
//なぜここでfalseが必要なのかという話は「イベントキャプチャリング」という、また別の話になるため、省略します。
####AddEventListenerを用いた例
例えば以下のようなコード例では、P要素をクリックすると、aaa!というログとbbb!というログが表示されます。
つまり、関数が２回表示されたということがわかります。
これを使わなかければ、上書きされてaaa!は表示されないため、便利なメソッドです。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<p id="abcd">test</p>
<script type="text/javascript">
function aaa(){
console.log('aaa!');
}
function bbb(){
console.log('bbb!');
}
var p = document.getElementById('abcd');
p.addEventListener('click', aaa, false);
p.addEventListener('click', bbb, false);
</script>
</body>
</html>
以上で、メソッドAddEventListenerについての復習を終わります。
参考にしたサイト
・JavaScript初級者から中級者になろう 三章第二回 イベントリスナ
・Qiitaイベント処理