一緒にサイの本を読みましょう:event処理_html/css_WEB-ITnose

この本「The Definitive Guide to JavaScript」は、JS 界のバイブルのようなもので、専門家と初心者の両方にとって必読の書です。しかし、1,000ページ近くあるこの本は、すでに気の遠くなるような分厚さであり、これを読むには時間だけでなく忍耐力も必要です。 JS 言語の深みを高めるために、この記事には実践的な知識とコードが含まれています。読書メモとして考えてください~

この 1 つの章では、W3C によって定義されたレベル 3 DOM イベントについて言及していますが、現在は UI イベントと名前が変更されています。

ドキュメント読み込みイベント

ナレッジポイント

読み込み。
DOMContentLoaded は、ドキュメントとすべての画像が読み込まれるまで発生しません。ドキュメントがロードされて解析され、遅延されたすべてのスクリプトが実行されると開始されます。
readystatechange の使用を優先します。 HTML5 標準化イベント。load イベントの前にトリガーされます。

例

onLoad 関数と同様に、whenReady 関数を定義します。ドキュメントの準備が完了すると、whenReady に渡される関数が Document オブジェクトのメソッドとして呼び出されます。 DOMContentLoaded および readystatechange イベントの使用を優先します。

コード

var whenReady = (function(){  var funcs = [], //需要运行的函数  ready = false, //为避免重复执行  i = 0;  function handler(e) {    if(!ready) {      //如果发生readystatechange事件，但状态不是complete则文档未准备好      if('readystatechange'===e.type && 'complete'!==document.readyState) {        return ;      }      for (i=0;i<funcs.length; i++) {        funcs[i].call(document);      }      ready = true;      funcs = null;    }  }  if(document.addEventListener) {    document.addEventListener('DOMContentLoaded', handler);    document.addEventListener('readystatechange', handler);    window.addEventListener('load', handler);  } else if(document.attachEvent) {    document.attachEvent('onreadystatechange', handler);    window.attachEvent('load', handler);  }  return function(f){    if (ready) f.call(document); //若准备完毕则运行    else funcs.push(f);  //否则加入队列  }}());

マウスイベント

ナレッジポイント

イベント属性

clientX と clientY はマウス座標を表します
altKey、metaKey、ctrlKey、shiftKey
ドラッグスタート イベントとドラッグエンド イベントは、HTML5 の要素にドラッグ可能な属性を追加した後に実装できます。

例

ドキュメント要素のドラッグを実装するドラッグ関数を定義します。

コード

ドラッグ関数は、mousedown イベントの開始時に座標点を記録し、途中で CSS スタイルを変更するという比較的単純な関数です。 dom要素の移動を実現するmousemoveイベントと同時に終了したらイベントの登録を解除します。ただし、DOM 要素は非静的に配置する必要があることに注意してください。

function drag(){  //获取坐标  function getScrollOffsets(w) {    var d = {};    //使用指定窗口或者当前窗口    w = w || window;    //现代浏览器    if (w.pageXOffest != null) {      return {        x: w.pageXOffest,        y: w.pageYOffset      };    }    //标准模式下的IE    d = w.document;    if (document.compatMode === 'CSS1Compat') {      return {        x: d.documentElement.scrollLeft,        y: d.documentElement.scrollTop      };    }    //怪医模式下的浏览器    return {      x: d.body.scrollLeft,      y: d.body.scrollTop    };  }  var scroll = getScrollOffsets();	var startX = event.clientX + scroll.x;	var startY = event.clientY + scroll.y;	var origX = elementToDrag.offsetLeft;	var origY = elementToDrag.offsetTop;	var deltaX = startX - origX;	var deltaY = startY - origY;  //注册鼠标移动和鼠标释放事件	if (document.addEventListener) {		document.addEventListener("mousemove", moveHandler, true);		document.addEventListener("mouseup", upHandler, true)	} else if (document.attachEvent) {		elementToDrag.setCapture();		elementToDrag.attachEvent("onmousemove", moveHandler);		elementToDrag.attachEvent("onmouseup", upHandler);		elementToDrag.attachEvent("onlosecapture", upHandler)	}	if (event.stopPropagation) event.stopPropagation();	else event.cancelBubble = true;	if (event.preventDefault) event.preventDefault();	else event.returnValue = false;  //移动鼠标时移动元素	function moveHandler(e) {		if (!e) e = window.event;		var scroll = getScrollOffsets();		elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";		elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px";		if (e.stopPropagation) e.stopPropagation();		else e.cancelBubble = true	}  //拖拽结束，注销事件	function upHandler(e) {		if (!e) e = window.event;		if (document.removeEventListener) {			document.removeEventListener("mouseup", upHandler, true);			document.removeEventListener("mousemove", moveHandler, true)		} else if (document.detachEvent) {			elementToDrag.detachEvent("onlosecapture", upHandler);			elementToDrag.detachEvent("onmouseup", upHandler);			elementToDrag.detachEvent("onmousemove", moveHandler);			elementToDrag.releaseCapture()		}		if (e.stopPropagation) e.stopPropagation();		else e.cancelBubble = true	}}

テキスト/キーボードイベント

ナレッジポイント

キーを押します。一般的に使用される高度なキーボード イベント。
テキスト入力。これは、レベル 3 DOM イベント仕様 (ソースにはキーボード/ペースト/ドラッグ アンド ドロップ/サウンド/手書きが含まれます)
textInput によって定義される一般的なイベントです。 Webkit ブラウザは textinput のようなイベントをサポートしています。

例 1

キーボード入力をフィルタリングし、ユーザーが許可されていない文字を入力した場合はメッセージ要素を表示し、それ以外の場合はメッセージ要素を非表示にする関数を作成します。

コード 1

(function() { var inputelts = document.getElementsByTagName("input"); for (var i = 0; i < inputelts.length; i++) { var elt = inputelts[i]; if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false) } else { elt.attachEvent("onkeypress", filter) } } function filter(event) { var e = event || window.event; var target = e.target || e.srcElement; var text = null; if (e.type === "textinput" || e.type === "textInput") text = e.data; else { var code = e.charCode || e.keyCode; if (code < 32 || e.charCode == 0 || e.ctrlKey || e.altKey) return; var text = String.fromCharCode(code) } var allowed = target.getAttribute("data-allowed-chars"); var messageid = target.getAttribute("data-messageid"); if (messageid) var messageElement = document.getElementById(messageid); for (var i = 0; i < text.length; i++) { var c = text.charAt(i); if (allowed.indexOf(c) == -1) { if (messageElement) messageElement.style.visibility = "visible"; if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false } } if (messageElement) messageElement.style.visibility = "hidden" }}());

例 2

入力された文字を自動的に大文字に変換します

コード 2

function forceToUpperCase(element) {	if (typeof element === "string") element = document.getElementById(element);	element.oninput = upcase;	element.onpropertychange = upcaseOnPropertyChange;	function upcase(event) {		this.value = this.value.toUpperCase()	}	function upcaseOnPropertyChange(event) {		var e = event || window.event;		if (e.propertyName === "value") {			this.onpropertychange = null;			this.value = this.value.toUpperCase();			this.onpropertychange = upcaseOnPropertyChange		}	}}

イベント処理

イベント プロキシ

メモリの節約、テーブル/リストなどの繰り返しに適しています性的なドム要素。基本原理は、イベントを祖先要素にバインドし、イベント オブジェクトのターゲットを決定し、対応する子要素の場合は対応するロジックを実行することです。

イベントの作成/配布

var event = document.createEvent('Event');event.initEvent('click');var element = document.getElementById('zdl');element.dispatchEvent(event);

最後に

この本は本当に有益で、読むのは退屈です。この章の内容を何度か読んだ後、Baidu マインド マップとコード例を組み合わせることにしました。より良い提案がある場合は、メールを送ってください ~ 読んでいただきありがとうございます

Baidu マインド マップのダウンロード アドレス: http ://yalishizhude.github.io/subscribe/

ブログ: http://yalishizhude.github.io

著者: Ariszhude