pegy score 137
2018/01/29 12:28 投稿
| Javascriptのonloadプロパティ |
| 重ねての質問で恐縮ですが、どうしても理解できなかったため問い合わせさせてください。 |
| 【要旨】 |
| 下記のように、 |
| 1) .todofukenクラスをクリックすると |
| 2) クリックした要素のdata-valueを元に |
| 3) <script src="+src+"></script>が生成されスクリプトが読み込まれる |
| 4) その読み込まれた先のスクリプトを操作する |
| という流れになります。 |
| 【ご質問】 |
| //ここが不明です。の点が質問の箇所なのですが、 |
| 1) Object.onlaodをMDNで調べてもwindow.onlaodしか出てきません。 |
| [MDN](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload) |
| ここでは、windowオブジェクトのプロパティとして設定されるイベントハンドラであり、読込後にfunction |
| windowの読込(DOMの構築)▶︎処理の実行と言う流れが理解できます。 |
| ここで、xml.onlaodとは一体なんなのでしょうか？ |
| プロトタイプチェーンでwindowまで辿って、プロパティを使用しているのでしょうか？としても、自分で定義した”xmlオブジェクトをロードした時に処理を実行する”の意味がわからないのです。。 |
| つまり、なぜ自分で定義したオブジェクトにonlaodを設定することが可能で、さらに自分が設定したオブジェクトがloadされるという状態が直感的に理解することができないため、アドバイスをいただきたいということになります。 |
| 例えばobj={1:'apple',2:'orange'}でobj.onlaod=function(alert('taste good!'))としても、何をloadしているのかよくわからない、、、と言った症状です。。 |
| 2)上記の疑問があってのことなのですが、pureJavaScriptと混在しているため、これをJqueryに仮に置き換えようと思い調べたのですが、window.onlaodは$(document).on('ready',function(){})は同義であるかのような記事を拝見しました。 |
| [参考記事](https://rcmdnk.com/blog/2015/07/11/computer-javascript-jquery/) |
| 実際に書き換えてもundefinedすらもlogに表示されないのですが、jqueryに書き換えは可能なのでしょうか？ |
| $(document).on('ready',function(){ |
| console.log(xml.data); |
| }) |
| 長文となり、誠に申し訳ございませんが、何卒、 |
| よろしくお願い申し上げます。 |
| ```HTML |
| <head> |
| </head> |
| <body> |
| <div class="item todofuken" data-value="13">東京都</div> |
| <div class="item todofuken" data-value="14">神奈川県</div> |
| <script> |
| $(function(){ |
| $(document).on('click','.todofuken',function(){ |
| var code =$(this).data('value'); |
| var src = "http://www.ekidata.jp/api/p/" + code + ".json"; |
| $('head').append('<script type="text/javascript" charset="UTF-8" src="'+src+'" ></script>') |
| xml.onload=function(){//ここが不明です。 |
| console.log(xml.data); |
| } |
| }) |
| }); |
| </script> |
| </body> |
| ``` |
| ```Javascript |
| //"http://www.ekidata.jp/api/p/13.json";リンク先の外部ファイル |
| if(typeof(xml)=='undefined') xml = {}; |
| xml.data = {"line":[{"line_cd":11301,"line_name":"JR東海道本線(東京～熱海)"},{"line_cd":11302,"line_name":"JR山手線"}]} |
| if(typeof(xml.onload)=='function') xml.onload(xml.data);``` |
| if(typeof(xml.onload)=='function') xml.onload(xml.data); |
| ``` |
