html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>JavaScript本格入門</title> 6</head> 7<body> 8<input id="btn" type="button" value="カウントアップ" /> 9<span id="result">-</span>回クリックされました。 10<script src="scripts/history_push.js"></script> 11</body> 12</html>
javascript
1var count = 0; 2var result = document.getElementById('result'); 3 4document.getElementById('btn').addEventListener('click', function() { 5 result.textContent = ++count; 6 history.pushState(count, null, '/js/chap07/count/' + count); 7}); 8 9window.addEventListener('popstate', function(e) { 10 count = e.state; 11 result.textContent = count; 12}); 13
上記コードに関しまして、お聞きしたいことがございます。
window.addEventListener内の中身に関しての説明で、「pushStateメソッドで追加したデータ(引数data)には、イベントオブジェクトeのstateプロパティでアクセスできる。」とあるのですが、確かに「window.addEventListener」の第二引数の関数にはイベントオブジェクトを受け取る為の引数「e」を指定していますが、「pushState」メソッドを使用しているのは、「document.getElementById('btn').addEventListener」の中身となっています。
pushStateメソッドを記載していない、Eventlistenerメソッド内であっても、pushStateメソッドで追加したデータにアクセスできるのは何故なのでしょうか?
どなたか、ご解説頂けましたら幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/21 06:46