Javascriptブラウザイベントまとめ_JavaScriptスキル

事件本身相当直观，常用的有：

事件	描述
abort	图片被阻止而不能加载
blur,focus	失去焦点，获得焦点
change	适用于表单元素，当元素使其焦点的时候判断是否发生改变
click,dblclick	单击，双击
keydown,keyup,keypress	按下键，键离开，按下键的时候触发，注意keypress只对数字字母键有效
load	加载图片或者页面的时候
mousedown,mouseup	按下键，放开键
mouseover,mouseout	over是当鼠标进入的时候出发，out是离开的时候触发
mousemove	鼠标移动
reset,submit	重置和提交表单

上記は一般的に使用されるイベントの単なるリストです。完全かつ具体的なリストについては、関連するマニュアルを参照してください。

1. レベル 0 DOM でのイベント処理
レベル 0 DOM でのイベント処理メソッドは、比較的初期のものであり、現在広く使用されている IE4.0 クラス メソッドです。 。

1.1 イベントの登録
ここでは主にレスポンスイベントの追加、つまりイベントハンドラの追加方法を紹介します。

(1) インライン登録

これは、次の例のように、HTML タグの属性としてイベント レスポンダーを設定します。もちろん、コードでもかまいません。多くの場合、それは関数呼び出しです。イベントのハンドルは通常、イベント名に接頭辞 on を加えたものです。

<title>イベントサンプル</title> <style type="text/css"> #adiv{ width:200px; height:200px; background-color:#00aa00; } </style> <div id="adiv" onmouseover="this.innerHTML ='OK'"> ある </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

これメソッドは非常に簡単ですが、どのブラウザでもサポートされていますが、欠点は、JavaScript コードと HTML コードが混在しており、イベント レスポンダを動的に追加したり、複数のレスポンダを追加したりできないことです。

(2) 従来の登録

このモードは、オブジェクトの属性としてイベントを追加します。例:

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]
1.2 イベント パラメータ (イベント オブジェクト)

一部のイベント ハンドラーでは、クリック イベントが発生した場所など、イベントに関する詳細情報が必要です。この情報は、イベント パラメーターを通じてイベント ハンドラーに渡されます。 IE イベント モデルと W3C イベント モデルは、これを異なる方法で実装します。

IE はイベント オブジェクトをウィンドウ オブジェクトのプロパティとして使用しますが、W3C はイベント オブジェクトをハンドラーのパラメーターとして使用します。クリック イベントを例として、IE と W3C 標準をサポートするブラウザ用のプログラムを作成します。

<title> </title>イベントサンプル<style type="text/css"> #adiv{ width:200px; height:200px; background-color:#00aa00; } </style> <div id="adiv" onclick="W3CClick(event)"> </div> <div id="result" style="font-size:small; font-family:Verdana">a </div>
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

このページ コードには、クリック イベント オブジェクトのすべてのプロパティが表示されます。上記の例は W3C ブラウザで使用されるメソッドです。IE で使用するには、これを onclick="IEClick()" に変更するだけです。W3CClick のパラメータ名はイベントのみであることに注意してください。 FF3.5、Chrome3、および IE8 (標準モードと互換モード) で実行した場合、多くの属性が出力されます。実際、意味があるのはこれらの共通属性だけです。

altKey、shiftKey、ctrlKey: alt、shift、ctrl キーを押すかどうか

clientX、clientY: クライアント領域の座標 (ブラウザ ウィンドウ)、screenX、screenY: 画面領域の座標
type: イベント タイプ

イベント パラメーターは少し異なる方法で渡されますが、クロスブラウザー コードを作成する場合にはそれほど問題は発生しません。関数の先頭で判断する必要がある window.event が定義されているかどうかを確認するだけです。 コードをコピーします

コードは次のとおりです。


function BothClick(args) {
var evnt = window.event ? window.event : args;
alert(evnt.clientX);
注册句柄为:

a

如果采用第二种方式注册句柄，则不需要什么特别处理。

1.3 事件的浮升
页面上的对象通常是重叠的，比如一个div中可以包括若干div或者其他元素。当某一事件触发的时候，同时有多个元素受影响，并且它们都有相应的事件处理程序，那么这些事件处理程序执行哪些？以何种顺序执行？这就是本节要讨论的问题。通常情况下，一个事件被多个句柄捕获的情形并不多见。先看一个例子(CSS省略)：

<script type="text/javascript"> function body_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Body Click "; } function out_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Outer Click "; } function inner_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Inner Click "; } </script> <div id="out" onclick="out_click()"> Outer Div <div id="innerdiv" onclick="inner_click()"> Inner Div </div> </div> <div id="res"> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在body，外层div和内层div都响应了click事件，结果如下：
 
可见，事件是由内向外层的元素依次触发的。（一般教材上的说法是向上浮升，bubbling,我觉得这个向上是有歧义的，我一开始就误认为内层的元素是上面的，因为它能覆盖外层的元素）用0级DOM注册的事件，它的浮升方法无论是IE还是W3C都是统一的。

1.4 浮升的取消
有时候我们需要在响应了一个事件之后，就不需要外层的元素再响应了，可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通过设置事件对象的cancelBubble属性来实现，W3C则是调用事件对象的stopPropagation方法。

例如上面的例子改为：

复制代码 代码如下:

function inner_click(arg){
var evnt=window.event?window.event:arg;
var dis=document.getElementById("res");
dis.innerHTML+="Inner Click
";
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble=true;
}
}

其他不变，这样就只能看到一行输出。

1.5 事件处理函数中的this
这个this指向的是触发事件的对象。

下面介绍2级DOM的事件句柄。这种方式是比较新的方式，它不依赖于任何特定的事件句柄属性。W3C规定的方式是

object.addEventListener(‘event',function,boolean)

第一个参数是事件名，第二个是事件响应函数，第三个变量如果是true，则事件函数在事件冒泡阶段被触发，否则是在事件的捕获阶段被触发。W3C规定事件的发生有两个阶段，首先是捕获，即事件以此从最外层层的元素向内层传递，相应的事件处理函数被依次触发，然后是冒泡阶段，事件从最内层的元素向外层传递。 看一个例子：

<title>DOM 2 Event</title> <script type="text/javascript"> function setup(){ var div=document.getElementById('testDiv'); div.addEventListener('click',function(){alert('div true');},true); document.addEventListener('click',function(){alert('body true');},true); div.addEventListener('click',function(){alert('div false');},false); document.addEventListener('click',function(){alert('body false');},false); } window.onload=setup; </script> <div id="testDiv" style="width:100px;height:100px;background-color:gray"></div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击灰色框，会依次弹出body true,div true,div false,body false. 很遗憾，IE不支持这种方式,最新的IE8也不支持。不过IE也有类似的注册事件的方法，名字是attachEvent.不过这个方法没有第三个参数，它支持冒泡阶段的事件响应。attachEvent函数传递事件参数的时候是和W3C一致的，也是通过event参数传递，但是，其函数内部的this指向的不是触发事件对象，而永远指向window。在event对象中有一个属性指向触发该事件的对象，W3C中是target,IE中是srcElement, 在符合W3C规范的浏览器中，事件处理函数中的this和event.target指向的是同一个对象。下面的程序展示了一个IE和W3C兼容的事件处理程序：

<title>DOM 2 Event</title> <script type="text/javascript"> function ClickMe(event){ var target1=event.target?event.target:event.srcElement; alert(target1.innerHTML); } function setup(){ var div=document.getElementById('testDiv'); if(div.addEventListener){ div.addEventListener('click',ClickMe,false); }else{ div.attachEvent('onclick',ClickMe); } } window.onload=setup; </script> <div id="testDiv" style="width:100px;height:100px;background-color:gray"> Hello World. </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

事件处理程序中W3C和IE还有诸多不一致之处，十分麻烦。好在大多都有较好的解决方案。更多信息请参考http://www.quirksmode.org/js/events_events.html

関連ラベル：

javascript イベント ブラウザ

ソース：php.cn

前の記事：JS getMonth() 日付関数の値の範囲は 0-11_time および date です。 次の記事：Extjs の学習プロセス中に初心者が遭遇しやすい低レベルのエラーの蓄積_extjs

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります

から 2024-04-06 19:25:49

0

1

505

d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...

から 2024-04-06 18:16:26

0

1

403

ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...

から 2024-04-06 15:35:24

0

1

274

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...

から 2024-04-06 12:53:11

0

1

376

関連トピック

詳細>

• 配列の長さを取得するjsメソッド
• jsで現在のページを更新する
• jsの丸め
• コンピュータはインターネットにアクセスできますが、ブラウザで Web ページを開けません
• ブラウザとはどういう意味ですか
• ノードを削除するjsメソッド
• JavaScript エスケープ文字
• jsで乱数を生成する方法