jsイベント詳細2:マウスとホイールイベント
2764 ワード
概要
マウスイベントはウェブ開発で最もよく使われているイベントです.結局、マウスはまだ最も主要な位置付けデバイスです.DOM 3レベルのイベントで9つのマウスイベントを定義しました.それぞれは、click、dbclick、mousedown、mouseenter、mouseleave、mouseove、mouseove、mouseout、mouseoverです.この9つのマウス事件の具体的な意味は、字面から見て分かります.ページ上のすべての要素はマウスのイベントをサポートしています.mouseenterとmouseleaveを除いて、すべてのマウスのイベントは泡が出て、キャンセルされてもいいです.マウスのイベントをキャンセルすると、ブラウザのデフォルト行動に影響します.マウスのイベントのデフォルトを取り消すと他のイベントにも影響します.マウスのイベントは他のイベントと密接な関係にあるからです.
各イベントの意味を簡単に紹介します.
click:主マウスボタン(一般的に左側のボタン)をクリックしたり、車を返すボタンを押したりした時にトリガします.この点はアクセス性を確保するために重要であり、Oclickイベントハンドラはキーボードでもマウスでも実行できるという意味である.dbclick:主マウスボタン(一般的に左ボタン)をユーザがダブルクリックしたときにトリガします.技術的には、このイベントはDOM 2レベルのイベント仕様では規定されていませんが、広く支持されていることから、DOM 3レベルのイベントは標準化されています.mousedown:ユーザが任意のマウスボタンを押した時にトリガします.このイベントはキーボードではトリガできません.mouseenter:マウスカーソルが元素の外側から元素の範囲内に初めて移動するときにトリガします.このイベントは泡を立てず、次の要素にカーソルを移動してもトリガされません.IE,Firefox 9+およびoperaはこのイベントをサポートします.mouseleave:要素の上にあるマウスカーソルが要素範囲外に移動するときにトリガします.このイベントは、泡を立てずに、次の世代の要素にカーソルを移動してもトリガされません.同様に、IE、Firefox 9+およびoperaはこのイベントをサポートします.mousemoove:マウスポインタが要素の内部を移動するときに繰り返すトリガです.このイベントはキーボードではトリガできません.mouseout:マウスポインタが要素の上にあり、ユーザーが他の要素に移動するときにトリガします.また移動する他の要素は、前の要素の外部にあるかもしれないし、この要素のサブ要素かもしれない.このイベントはキーボードではトリガできません.mouseover:マウスポインタが1つの要素の外側にあると、ユーザーが他の要素の境界内に最初に移動したときにトリガします.このイベントはキーボードではトリガできません.mouseup:ユーザがマウスボタンを放した時にトリガします.このイベントはキーボードではトリガできません.
各ブラウザに対応するイベントの傍受先:
マウスイベントはウェブ開発で最もよく使われているイベントです.結局、マウスはまだ最も主要な位置付けデバイスです.DOM 3レベルのイベントで9つのマウスイベントを定義しました.それぞれは、click、dbclick、mousedown、mouseenter、mouseleave、mouseove、mouseove、mouseout、mouseoverです.この9つのマウス事件の具体的な意味は、字面から見て分かります.ページ上のすべての要素はマウスのイベントをサポートしています.mouseenterとmouseleaveを除いて、すべてのマウスのイベントは泡が出て、キャンセルされてもいいです.マウスのイベントをキャンセルすると、ブラウザのデフォルト行動に影響します.マウスのイベントのデフォルトを取り消すと他のイベントにも影響します.マウスのイベントは他のイベントと密接な関係にあるからです.
各イベントの意味を簡単に紹介します.
click:主マウスボタン(一般的に左側のボタン)をクリックしたり、車を返すボタンを押したりした時にトリガします.この点はアクセス性を確保するために重要であり、Oclickイベントハンドラはキーボードでもマウスでも実行できるという意味である.dbclick:主マウスボタン(一般的に左ボタン)をユーザがダブルクリックしたときにトリガします.技術的には、このイベントはDOM 2レベルのイベント仕様では規定されていませんが、広く支持されていることから、DOM 3レベルのイベントは標準化されています.mousedown:ユーザが任意のマウスボタンを押した時にトリガします.このイベントはキーボードではトリガできません.mouseenter:マウスカーソルが元素の外側から元素の範囲内に初めて移動するときにトリガします.このイベントは泡を立てず、次の要素にカーソルを移動してもトリガされません.IE,Firefox 9+およびoperaはこのイベントをサポートします.mouseleave:要素の上にあるマウスカーソルが要素範囲外に移動するときにトリガします.このイベントは、泡を立てずに、次の世代の要素にカーソルを移動してもトリガされません.同様に、IE、Firefox 9+およびoperaはこのイベントをサポートします.mousemoove:マウスポインタが要素の内部を移動するときに繰り返すトリガです.このイベントはキーボードではトリガできません.mouseout:マウスポインタが要素の上にあり、ユーザーが他の要素に移動するときにトリガします.また移動する他の要素は、前の要素の外部にあるかもしれないし、この要素のサブ要素かもしれない.このイベントはキーボードではトリガできません.mouseover:マウスポインタが1つの要素の外側にあると、ユーザーが他の要素の境界内に最初に移動したときにトリガします.このイベントはキーボードではトリガできません.mouseup:ユーザがマウスボタンを放した時にトリガします.このイベントはキーボードではトリガできません.
各ブラウザに対応するイベントの傍受先:
var EventUntil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
オブジェクトは、ieおよびdomレベルのイベントの一般的なイベント関数をカプセル化した.参考にして使ってもいいです.