オリジナルのWebページでカスタムデータ属性を使用する

まず私がなぜこのような「おかしい」考えを持っているのかを話します.それはこのようなシーンに基づいています:私は最近暇で、小さなdemo:音楽プレーヤーを完璧にしました.中には、リストのいずれかをクリックして音楽再生フレームをポップアップする機能があります.私はもともと「一つ一つのclickイベントの傍受」を追加していました.これは大変だ!

<div id="videob"></div>

//js  
videob.onclick=function(){
	let video=document.createElement('video')
	video.setAttribute('src','xxx')
	video.setAttribute('controls','controls')
	video.style.cssText="width:90%;height:300px"
	document.querySelector('body').appendChild(video)
}

その後、最適化時にイベントエージェントを変更し、非常に優れていることを認めざるを得なかったが、jsに「MP 4データ」(配列)の山が現れ、イベントをトリガーしたときに現在どれであるかを判断し、配列からaudioに割り当てられたsrcを手に入れなければならなかった.
実際、Webアプリケーションを開発する際には、JavaScriptでドキュメント以外の情報を取得することがよくあります.場合によっては、Webアプリケーションが正常に動作することを保証するために、いくつかのテクニックを使用する必要があります.一般に、テクニックは、追加の情報をイベントハンドラに埋め込むか、rel属性またはclass属性を乱用して注入動作を容易にすることにほかならない.
幸いなことに、HTML 5にはカスタムデータ属性が導入されています.すべてのカスタムデータ属性はdata-接頭辞で始まり、HTML 5ドキュメントのベリファイアは検証時に無視されます.開発者は、任意の要素にカスタムデータ属性を追加できます.属性値は、写真のメタデータ、緯度座標、またはポップアップウィンドウのサイズです.最も素晴らしいのは、JavaScriptを簡単に使用して取得できるため、ほとんどのブラウザでカスタムデータ属性を使用することができます.
操作を開始する前に、0レベルのDOMイベントという概念を「繰り返し」なければなりません.一般的には、またはHTMLラベルに し、イベントキャプチャおよびバブルメカニズムがないなど、さまざまなon のイベント です.
なぜonclickを するのが いのか、ポップアップウィンドウの がずっと いようだ--これは なことだ.ポップアップウィンドウは、ユーザーに を したり、 われないスパイウェアやウイルスに したりするためによく されますが、 は をだまし って します.そのため、ほとんどのブラウザにポップアップウィンドウをブロックするプラグインがあるのも ではありません.しかし、Webアプリケーションの 、 に は、オンラインヘルプ 、 オプション、または の なユーザーインタフェース をユーザーに するために、ポップアップウィンドウに することが い. 、1つのページに のコードが されます.

<a href="#" onclick="window.open('xxx',null,'width=300,height=300');">go to xxx</a>

あまり たないコードには な があります

リンクの アドレスは されていません!JavaScriptが になっている 、リンクはユーザーを なページに くことができません.これは に で、すぐに する があります. は、href を して せず、いかなる でもhref に「#」を しないことをお めします.

は、リンクスタイルテーブルでスタイル を するように、 がコンテンツから されることに する. はonclickを うと ですが、ページに50のリンクがある を すると、onclickメソッドが する が られます. り しJavaScriptコードを も くしかありません.サーバー コードでブラウザ コードを する は、JavaScriptイベントを します.

の を するために、aリンクごとにhrefを し、 なるclassを しました!を します.

<a href="xxx" class="pop">go to xxx</a>

//js  
var link=document.querySelector('a.pop')
link.onclick=function(e){
	e.preventDefault();
	window.open(this.getAttribute('href'));
}

たちはまだopenの さと を していません!
、 たちはまた の と じ に りました!
カスタムデータ を JavaScriptを したWebアプリケーションを する 、 したことが です.ご のように、コードにウィンドウの の さと を することは ましいが、onclickメソッドには くの がある. に を め む を することができます.リンクを の に します.

<a href="xxx" data-width="600" data-height="400" class="pop">go to xxx</a>

var link=document.querySelector('a.pop')
link.onclick=function(e){
	e.preventDefault();
	window.open(this.getAttribute('href'),null,"width="+this.getAttribute('data-width')+",height="+this.getAttribute('data-height'));
}

まあ、この には がないようです.しかし、「 の さ」を に できるように、 の を てみましょう.

<div id="mxc">
	<div class="videob" data-uri="./img/1.mp4"></div>
	<div class="videob" data-uri="./img/2.mp4"></div>
</div>

mxc.addEventListener('click',function(e){
	let target=e.target || e.srcElement;
	let video=document.createElement('video')
	video.setAttribute('src',target.getAttribute('data-uri'))
	video.setAttribute('controls','controls')
	video.style.cssText="width:90%;height:300px;margin:0 auto"
	document.querySelector('body').appendChild(video)
},false)

このようにしてやっと“ ”は“ の ”を しました!
には、カスタムコンポーネント(vue/ ウィジェット)など、パラメータを の ち び に することができます.
は,カスタムデータ を いて な をタグに め むことができる.カスタムデータ を して、 と をページにキャッシュし、ユーザータイムゾーンを に と を できます.HTMLページにUTC で を き、クライアントでユーザローカル に するだけです.( にブラウザのキャッシュと :ページ が されていない は されません)