javascript
1<html> 2 <head> 3 <title>test</title> 4 <style type="text/css"> 5 div{ 6 width:500px; 7 height:300px; 8 border:1px solid blue; 9 } 10 </style> 11 </head> 12 <body> 13 14 <script type="text/javascript"> 15 16 function MyDiv(name){ 17 this.div = document.createElement("div"); 18 this.name=name; 19 this.div.textContent="このdiv要素は"+name+"です"; 20 document.body.appendChild(this.div); 21 22 this.div.addEventListener('click',function(e){ 23 console.log(this.name); 24 },false); 25 } 26 27 var div1 = new MyDiv("div_1"); 28 </script> 29 </body> 30</html>
javascriptで動的にdiv要素を作って、それをクリックしたらそのdiv要素のnameプロパティの値がコンソールに表示される、というスクリプトなんですが、実行すると結果は「undefined」になります。
「イベントを元に関数を呼び出した場合、関数内の this はイベントの発生元の要素を指す」と認識していました。この場合addEventListenerの第2引数の関数内のthisは、
イベント発生元であるインスタンスdiv1を指すのでコンソールには「div_1」と表示されるのではないかと思うのですが、なぜ結果がundefinedなのでしょうか?
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。