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