<div id="btn" class="btn"> <p class="inner">SAY!</p> </div>
こちらのHTMLに、
* { margin: 0; padding: 0; } body { padding: 50px; color: #2e2e2e; background: #e8e8e8; font: 25px HelveticaNeue-UltraLight; text-align: center; } .btn { margin: 20px 10px; } .inner { display: inline-block; padding: 20px 60px; border-bottom: solid #333 4px; border-radius: 12px; color: #eee; cursor: pointer; background: #666; list-style: none; } .inner:hover { margin-top: 4px; border: none; }
こちらのCSSと、
(function(win, doc) { 'use strict'; doc.getElementById('btn').addEventListener('click', function() { alert('SAY'); }, false); })(this, document);
こちらのJavaScriptを読み込ませます。
無事にスタイルが適用され、ボタンにクリックイベントが設定されます。
ではこの状態から、外部スクリプトと外部スタイルシートを読み込んでいるlinkタグ、scriptタグを削除したらどうなるでしょうか。
demo
デモはこちらです。
5秒後にlinkタグ、scriptタグを削除しています。
ご覧の通り、スタイルシートは効かなくなります。
が、クリックしてみるとわかりますがボタンのクリックイベントは残っています。
そう。外部スクリプトは評価が終わった後にscriptタグを削除しても効果は消えないのです。
そのあたりは念能力に似ているのかもしれないですね。