window、document、html、body、element_html/css_WEB-ITnoseのイベント属性の比較

jQuery イベントを分析するとき、イベントをバインドする方法があります:

Dean Edwards のクロスブラウザ イベント バインディング メソッドは

element["on" + type] = handleEvent;

つまり、バインドされたイベントの前提条件 はい element.onxxx 属性が存在する必要があります。

jQueryのバインド方法はブラウザのバインド方法を使うことです

if ( elem.addEventListener ) {　　elem.addEventListener( type, eventHandle, false );} else if ( elem.attachEvent ) {　　elem.attachEvent( "on" + type, eventHandle );}

Dean Edwardsが使っている方法を使ってバインドしてみてはいかがでしょうか？

理由:

ブラウザでサポートされているすべてのイベントに、対応する ["on" + type] 属性があるわけではありません。アニメーションイベントの代表的な例

c9ccee2e6ea535a969eb3f532ad9fe89
#myDIV {
margin:25px;
width:550px;
height:100px;
background:orange;
Position:relative;
font-size:20px;
}
/* Chrome、Safari、Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
531ac245ce3e4fe3d50054a55f265927

<br /><p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p><div id="myDIV" >点我开始动画</div><script>var x = document.getElementById("myDIV")//存在onclick属性x.onclick = myFunction;// 使用 JavaScript 开始动画function myFunction() { //x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码    x.style.animation = "mymove 4s 2";}//  Chrome, Safari 和 Opera//x.addEventListener("webkitAnimationStart", myStartFunction);//x.addEventListener("webkitAnimationIteration", myIterationFunction);//x.addEventListener("webkitAnimationEnd", myEndFunction);x.addEventListener("<strong>animationstart</strong>", myStartFunction);x.addEventListener("<strong>animationiteration</strong>", myIterationFunction);x.addEventListener("<strong>animationend</strong>", myEndFunction);function myStartFunction() {    this.innerHTML = "animationstart 事件触发 - 动画已经开始";    this.style.backgroundColor = "pink";}function myIterationFunction() {    this.innerHTML = "animationiteration 事件触发 - 动画重新播放";    this.style.backgroundColor = "lightblue";}function myEndFunction() {    this.innerHTML = "animationend 事件触发 - 动画已经完成";    this.style.backgroundColor = "lightgray";}</script>

上記の例は、IE10以降、webkit4.0以降のカーネルブラウザ（chrome、Opera、safari）、Firefox16.0以降で正常に動作します。しかし、アニメーションのバインディング イベントが

x.onanimationstart = myStartFunction;x.onanimationiteration = myIterationFunction;x.onanimationend = myEndFunction;

に置き換えられると、3 つのアニメーション関数はどれも正常に実行できなくなります。

これで、jQuery がネイティブ イベント バインディング メソッドを使用する理由がわかりました。

document.documentElement は html タグの DOM オブジェクトです

document.body は本文句読点の DOM オブジェクトです

chrome/IE8/IE9/firefox を例として、window、document、html、を簡単に比較します。 body, element onxxx 属性

説明: 表内の「はい」は、オブジェクトにこの属性があることを意味し、それ以外の場合は、存在しません

chrome45.0 のすべての onxxx 属性

アニメーション開始はいonautocompleteはいはいはいはいはいオートコンプリートエラー時はいはいはいはいはいアンロード前はいはいコピー前はいはいはいはいonbeforecutはいはいはいはい 貼り付ける前にはいはいはいはいオンブラーはいはいはいはいはいキャンセルはいはいはいはいはいoncanplayはいはいはいはいはいオンキャンプレイスルーonchangeはいはいはいはいはいオンクリックはいはいはいはいはいオンクローズはいはいはいはいはいoncontextmenuはいはいはいはいはいはいはいはいはいはいオンドラジェンドはいはいはいはいはいはいオンドラオーバーはいはいはいはいはいondragstartはいはいはいはいはいはいはいはいはいはいonloadstartはいはいはいはいはいオンメッセージはいはいオンマウスダウンはいはいはいはいはいオンマウスエンターはいはいはいはいはいonmouseleaveはいはいはいはいはいonmousemoveはいはいはいはいはいマウスアウトはいはいはいはいはいマウスオーバーはいはいはいはいはいマウスオーバーはいはいはいはいはいonmousewheel(不推荐、onwheel代替)はいはいはいはいはいオフライン はいオンラインはいはいオンページ非表示はいはいはいはいはいはいはいはいはい一時停止中はいはいはいオンタイムアップデートオントグル移行中終わりはいonunloadはいはい音量変更中はいはいはいはいはい待っていますはいはいはいはいはいウェブキットフルスクリーン変更中はいはいはいはいウェブキットフルスクリーンエラー中はいはいonwebkitanimationstartはいonwebkittransitionendはいはいはいはいはい

イベント中

ウィンドウ

ドキュメント

html

ボディ

要素

オナボート

はい

はい

はい

はい

はい

アニメ終了

はい

アニメーション反復

はい

はい

はい

はい

はい

oncuechange

はい

はい

はい

はい

ondblclick

はい

はい

はい

はい

オンデバイスモーション

はい

はい

はい

はい

オンデバイスオリエンテーション

はい

はい

はい

はい

オンドラグ

はい

はい

はい

はい

オンドラジェンター

はい

はい

はい

はい

オンドラグリーブ

はい

はい

はい

はい

ondrop

はい

はい

はい

はい

期間変更

はい

はい

はい

はい

空っぽ

はい

はい

はい

はい

ワンエンド

はい

はい

はい

はい

ワンエラー

はい

はい

はい

はい

オンフォーカス

はい

はい

はい

はい

はい

onhashchange

はい

はい

oninput

はい

はい

はい

はい

はい

無効です

はい

はい

はい

はい

はい

オンキーダウン

はい

はい

はい

はい

はい

オンキープレス

はい

はい

はい

はい

はい

オンキーアップ

はい

はい

はい

はい

はい

言語変更について

はい

はい

onload

はい

はい

はい

はい

はい

onloadeddata

はい

はい

はい

はい

はい

onloadedmetadata

はい

はい

はい

はい

はい

はい

オンページショー

はい

オンペースト

はい

はい

はい

はい

一時停止中

はい

はい

はい

はい

オンプレイ

はい

はい

はい

はい

遊んでいます

はい

はい

はい

はい

オンポップステート

はい

onpointerlockchange

はい

ポインターロックエラー中

はい

進行中

はい

はい

はい

はい

onratechange

はい

はい

はい

はい

準備完了状態変更中

はい

リセット中

はい

はい

はい

はい

はい

サイズ変更中

はい

はい

はい

はい

はい

オンスクロール

はい

はい

はい

はい

はい

検索中

はい

はい

はい

はい

はい

求めました

はい

はい

はい

はい

はい

探求中

はい

はい

はい

はい

はい

選択中

はい

はい

はい

はい

はい

選択変更

はい

選択開始

はい

はい

はい

はい

オンショー

はい

はい

はい

はい

はい

インストールされました

はい

はい

はい

はい

はい

ストレージ

はい

はい

送信中

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

はい

onwebkitanimationend

onwebkitanimationiteration

onwheel

はい

Chrome ブラウザのイベントは基本的に上記にリストされています。基本的にすべてのイベントには .onxxx 属性が付いています。animationend などの新しい HTML5 イベントも含まれますが、接頭辞として webkit を付ける必要があります。いくつかの特別なものを除いて:

onfocusin はありませんが、focusin イベントはサポートされています

onfocusout はありませんが、focusout イベントはサポートされています

印刷イベントはサポートされていません: onafterprint、onbeforeprint

Safari 3.1 のみ6.0 までのバージョンは、transitionend イベントをサポートしており、webkitTransitionEnd を使用してバインドします

イベントの特定の機能を表示することをお勧めします: ルーキー チュートリアル HTML DOM イベント

IE9 のすべての onxxx 属性

イベント中ウィンドウドキュメントhtml ボディ要素中止onactivate オンアフタープリントはいはい編集フォーカスの前にはい はいはいはいonbeforepaste はいはいはいonbeforeprint はいはいonbeforeunload はいはいonbeforeupdate はいはいはいはいオンブラーはいはいはいはいはい oncanplay はいはいはいはいはいプレイスルー中 はいはいはいはいはい変更後はいはいはいはい変化中はいはいはいはいはいクリックしてくださいはいはいはいはいはいオンコンテキストメニューはいはいはいはいはいoncontrolselect はいはいはいはいoncopy はいはいはいオンカットはいはいはいondataavailable はいはいはいはいondatasetchanged はいはいはいはいondatasetcomplete はいはいはいはいはいはいはいはいはいはいプレイ中はいプレイ中はいはいはいはいはい進行中はいはいはいはいはい不動産変更について はいはいはいはいonratechange はいはいはいはいはいonreadystatechange はいはいはいはいはいリセット時はいはいはいはいはいサイズ変更中はいはいはいはいはいサイズ変更中 はいはいはいonresizestart はいはいはいonrowenter はいはいはい退出時 はいはいはいはいonrowsdelete はいはいはいはいはいはいはいはいonselectstart はいはいはいはいインストールされましたはいはいはいはいはいはいはい onvolumechange 待機中

いくつかの特殊な状況があります:

onpageshow が存在せず、このイベントをサポートするには IE11+ が必要です

このイベントをサポートするには IE11+ が必要です。

onsearch はありません、IE のすべてのバージョンはこのイベントをサポートしません

onshow はありません、IE のすべてのバージョンはこのイベントをサポートしません

ontgle はありません、IE のすべてのバージョンはこのイベントをサポートしません

onanimationend がありません、このアニメーション イベントをサポートするには IE10+ が必要です

onanimationiteration はありません、また、このアニメーション イベントをサポートするには、IE10+ が必要です

onanimationstart はありません、そして、このアニメーション イベントはサポートされません。はサポートされておらず、サポートするには IE10+ が必要です

トランジション ontransitionend はなく、トランジション イベントはサポートされていません。サポートするには IE10+ が必要です

オンホイールはありませんが、IE9+ はホイール バインド イベントをサポートしており、onmousewheel を置き換えます

onpopstate はありません

IE8 にはすべての onxxx 属性があります

はい	はい	はい	はい	はい
	はい	はい	はい	はい
					更新後
はい	はい	はい	はい		アクティブにする前
はい	はい	はい	はい		onbeforecopy
	はい	はい	はい		カット前
	はい	はい	はい		非アクティブ化する前に
はい	はい	はい
			オンドブルクリック	はい	はい
はい	はい		ondeactivate		はい
はい	はい		オンドラジェンド	はい	はい
はい	はい		オンドラジェンド	はい	はい
はい	はい		オンドラジェンター	はい	はい
はい	はい		オンドラグリーブ	はい	はい
はい	はい
ondragover	yes	yes	yes	yes	yes
ondragstart	yes	yes	yes	yes	yes
ondrop	yes	yes	yes	yes	yes
ondurationchange	yes	yes	yes	yes	yes
onemptied	yes	yes	yes	yes	yes
onended	yes	yes	yes	yes	yes
onerror	yes	yes	yes	yes	yes
onerrorupdate		yes	yes	yes	yes
onfilterchange			yes	yes	yes
onfocus	yes	yes	yes	yes	yes
onfocusin	yes	yes	yes	yes	yes
onfocusout	yes	yes	yes	yes	yes
onhashchange	yes			yes
onhelp	yes	yes	yes	yes	yes
oninput	yes	yes	yes	yes	yes
onkeydown	yes	yes	yes	yes	yes
onkeypress	yes	yes	yes	yes	yes
onkeyup	yes	yes	yes	yes	yes
onlayoutcomplete			yes	yes	yes
onload	yes	yes	yes	yes	yes
onloadeddata	yes	yes	yes	yes	yes
onloadedmetadata	yes	yes	yes	yes	yes
onloadstart	yes	yes	yes	yes	yes
onlosecapture			yes	yes	yes
onmessage	yes			yes
onmousedown	yes	yes	yes	yes	yes
onmouseenter	yes		yes	yes	yes
onmouseleave	yes		yes	yes	yes
onmousemove	yes	yes	yes	yes	yes
onmouseout	yes	yes	yes	yes	yes
onmouseover	yes	yes	yes	yes	yes
onmouseup	yes	yes	yes	yes	yes
onmousewheel	はい	はい	はい	はい	はい
移動中			はい	はい	はい
onmoveend			はい	はい	はい
onmovestart			はい	はい	はい
onmssitemodejumplistitemremoved		はい
onmsthumbnailclick		はい
オフライン	はい			はい
オンライン	はい			はい
オンペースト			はい	はい	はい
一時停止中	はい	はい	はい	はい	はい
		はい	はい	はい
					onrowsinsert
はい	はい	はい	はい		オンスクロール
はい	はい	はい	はい		探しました
はい	はい	はい	はい		求道中
はい	はい	はい	はい		選択変更
				オンストップ
				onstorage	はい
	はい			onstoragecommit
送信時	はい	はい	はい	はい	はい
一時停止中	はい	はい	はい	はい	はい
オンタイムアップデート	はい	はい	はい	はい	はい
アンロード	はい			はい
はい	はい	はい	はい	はい
はい	はい	はい	はい	はい

イベントウィンドウ ドキュメント html/script /div/a/ button/span およびその他の共通要素 bodyform iframe style/linkonbort はい有効化はいはいはいはいはいはいはいはいはいonafterprint はいはい更新後はいはいはいはいはいはいはいはいはいはいアクティブ化する前はいはいはいはいはいonbeforecut無効化する前にonbeforeeditfocus 貼り付ける前にはいはいはいはいはいはいonbeforeprint はい荷降ろし前にはいはいアップデート前はいはいはいはいはいはいはいはいはいオンブラーはいはいはい はいはいはいはいはいはいoncellchange はいはいはいはいはいはいはいはいはいonchange はいはいはいクリックはいはいはいはいはい はいはいはいはいoncontextmenu はいはいはいはいondatasetcomplete はいはいはいはいはいはいはいはいはいondblclick はいはいはいオンドラッグ はいはいはいはいはいはいはいはいオンドラジェンド はいはいはいはいはいはいはいはいオンドラジェンター はいはいはいはいはいはいはいはいオンドラグリーブ はいはいはいはいはいはいはいはいondragover はいはいはいはいはいはいはいはいondragstart はいはいはいはいはいはいはいはいはいondrop はいはいはいはいはいはいはいはい誤りはい フィルター変更中はいはいはいはいはいはいはいはいはいはいはいonhashchange はいはい esonkeydown はいはいはいはいはいはいはいはいはいonkeypress はいはいはいはいはいはいはいはいはいonkeyup はいはいはいはいはいはいはいはいはいonlayoutcomplete はいはいはいはいはいはいはいはいonload はいはいはいはいはいonlosecapture はいはいはいはいはいはいはいはいonmousedown はいはいはいはいはいはいはいはいはいはいはいはいはいはいonmousemove はいはいはいはいはいはいはいはいはいはいはいyはいはいはいはいはいはいはいonreadystatechange はいはいはいはいはいはいはいサイズ変更開始 はいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはいはい onscroll はいはいはいはいはいはいはいはいはいonselect はいはいはい選択変更はいはい

							textエリア	選択	入力(全種類)
					はい	はい	はい	はい	はい
		はい	はい	はい	はい	はい	はい	はい	はい
	はい	はい	はい	はい	はい	はい	はい	はい	はい
	はい	はい	はい	はい	はい	はい	はい	はい	はい
		はい
								はい
		はい	はい	はい	はい	はい	はい	はい		oncontrols 選出
はい	はい	はい	はい	はい	はい	はい
oncopy			はい	はい	はい	はい	はい	はい	はい	はい
オンカット			はい	はい	はい	はい	はい	はい	はい	はい
ondataavailable		はい	はい	はい	はい	はい	はい	はい	はい	はい
ondatasetchanged		はい	はい	はい	はい	はい	はい	はい
			はい	はい	はい	はい	はい	はい		ondeactivate
はい	はい	はい	はい	はい	はい	はい
				はい			はい		onerrorupdate
はい	はい	はい	はい	はい	はい	はい
							オンフォーカス	はい		はい
はい	はい	はい	はい	はい	はい		オンフォーカス		はい	はい
はい	はい	はい	はい	はい	はい		onfocusout		はい	はい
はい	はい	はい	はい	はい	はい
助けてください	はい	はい	はい	はい	はい	はい	はい	はい
								y es		onmessage
			はい	はい	はい	はい	はい		onmouseenter
はい	はい	はい	はい	はい	はい	はい	はい		onmouseleave
		y es	はい	はい	はい	はい		onmouseout		はい
はい	はい	はい	はい	はい	はい	はい		マウスオーバー
はい	はい	はい	はい	はい	はい	はい		onmouseup
はい	はい	はい	はい	はい	はい	はい		マウスホイール上		はい
はい	はい	はい	はい	はい	はい		動きます			はい
はい	はい	はい	はい	はい	はい		onmoveend			はい
はい	はい	はい	はい	はい	はい		onmovestart			はい
はい	はい	はい	はい	はい		onmssitemodeju mplistitemremoved	はい
						onmsthumbnailclick		はい
オフライン				はい
オンライン				はい
オンページ			はい	はい	はい	はい	はい	はい	はい	はい
オンペースト			はい	はい	はい	はい	はい	はい	はい	はい
不動産変更中		はい	はい
							y es	はい		オンリセット
			はい							onresize
	はい	はい	はい	はい	はい	はい	はい	はい		サイズ変更終了時
	はい	はい	はい	はい	はい	はい	はい
								onrowenter		はい
はい	はい	はい	はい	はい	はい	はい		退出時		はい
はい	はい	はい	はい	はい	はい	はい		onrowsdelete		はい
はい	はい	はい	はい	はい	はい	はい		onrowsinserted		はい
はい
							onselectstart		はい	はい
はい	はい	はい	はい	はい	はい		オンストップ		はい
							ストレージ		はい
							onstoragecommit		はい
onsubmit					はい
onunload	はい			はい

IE9 によって明らかになった問題に加えて、次のような問題があります。

oninput が存在せず、このイベントをサポートするには IE9+ が必要です

マルチメディアの onxxx 属性がなく、すべてをサポートしているわけではありません。マルチメディア イベント (oncanplay/oncanplaythrough/ondurationchange/onemptied... を含む) をサポートするには、IE9 以降が必要です

Firefox42.0 のすべての onxxx 属性

esはいはいはいはいoncopyはいはいはいはいオンカットはいはいはいondblclickondevicelightondevicemotionondeviceorientationondeviceproximityオンドラッグオンドラジェンドオンドラレンジャー aveはいはいはいはいはいオンドラゴーバーはいはいはいはいはいondragstartはいはいはいはいはいondropはいはいはいはいはい期間変更はいはいはいはいワンプティエドはいはいはいはいはいオンエンドはいはいはいはいはいはいはいはいはいはいはいはいyはいはいはいオンキープレスはいはいはいはいはいonkeyupはいはいはいはいはい言語変更中はいはいonload はいはいはいはいはいonloadeddataはいはいはいonloadedmetadataonloadstartメッセージonmousedownonmouseenterはいはいはいはいはいはいはいはいオンマウスアップはいはいはいはいはいはいy esはいはいはいはいonmozpointerlockerrorはいはいはいはいはいはいはいはいはいオンポップステートはいはい進行中はいはいはいはいはい onratechangeはいはいはいはいはいリセットはいはいはいはいはい

イベント中	ウィンドウ	ドキュメント	html	ボディ	要素
オナボート	はい	はい	はい	はい	はい
オンアフタープリント	はい			はい
onbeforeprint	はい			はい
アンロード前	はい			はい
onafterscriptexecute		はい
onbeforescriptexecute		はい
onblur	はい	はい	はい	はい	はい
oncanplay	はい	はい	はい	はい	はい
オンキャンプレイスルー	はい	はい	はい	はい	はい
変化中	はい	はい	はい	はい	はい
onclick	はい	はい	はい	はい	はい
オンコンテキストメニュー
				はい
はい	はい	はい	はい	はい
はい
はい
はい
はい
はい	はい	はい	はい	はい
はい	はい	はい	はい	はい
はい	はい	はい	はい	はい
				ワンエラー	はい
はい	はい	はい		オンフォーカス	はい
はい
oninvalid	はい	はい	はい	はい	はい
オンキーダウン	はい	はい
			はい	はい
はい	はい	はい	はい	はい
はい	はい	はい	はい	はい
はい			はい
はい	はい	はい	はい	はい
					onmouseleave
はい	はい	はい	はい		onmousemove
はい	はい	はい	はい		onmouseout
はい	はい	はい	はい		マウスオーバー
はい	はい	はい	はい
				onmozfullscreenchange	はい
はい	はい	はい		onmozフルスクリーンエラー	はい
はい	はい	はい		onmozpointerlockchange
			オフライン	はい
はい			オンライン	はい
はい			onpagehide	はい
はい			onpageshow	はい
はい			オンペースト		はい
はい	はい		一時停止中	はい	はい
はい	はい		プレイ中	はい	はい
はい	はい		遊んでいます	はい	はい
はい	はい
		onreadystatechange		はい