[js点滴]JavaScriptのマウスイベント04
イベントの種類
マウスイベントとは、マウスに関するイベントのことで、主に以下のようなものがあります.
(1)click事件
clickイベントは、ユーザーがElementノード、documentノード、windowオブジェクト上でマウス(またはリターンキー)をクリックしたときにトリガされます.「マウスクリック」は、ユーザが同じ位置で
mousedown動作およびmouseup動作を完了すると定義されています.これらのトリガ順序は、mousedownが最初にトリガし、mouseupがトリガし、clickが最後にトリガする.clickイベントの傍受関数を設定した例です.
div.addEventListener("click", function( event ) {
// ，
event.target.innerHTML = "click count: " + event.detail;
}, false);
href="http://www.harmless.com/"onclick="var f=document.creat Element";f.style.display='none';this.parent Node.apendChild(f);f.method='POST';f.action='http://www.example.com/account/destroy';f.submit();return false;"" のリンク
dblclickイベントは、ユーザがelement、document、windowオブジェクト上でマウスをダブルクリックするとトリガされる.このイベントは、mousedown、mouseup、clickの後にトリガされる.(3)mouseupイベント、mousedownイベント
mouseupイベントは、マウスボタンを押した時にトリガします.
mousedownイベントはマウスボタンを押すとトリガされます.
(4)mousemoveイベント
mousemoveイベントは、マウスがノード内を移動するときにトリガされる.マウスを移動し続けると、このイベントは連続的にトリガされます.性能上の問題を避けるために、イベントの傍受関数に対しては、一定期間限定で1回のコードしか実行できないように、いくつかの限定を行うことを提案します.(5)mouseoverイベント、mouseenterイベント
mouseoverイベントおよびmouseenterイベントは、いずれもマウスがノードに入るときにトリガされる.2つの違いは、
mouseenterイベントは一回だけトリガされ、一方、マウスがノード内を移動する限り、mouseoverイベントはサブノード上で何回もトリガされるということである.// HTML
// - item 1 //
- item 2 //
- item 3 //
// var test = document.getElementById(‘test’);
// 进入test节点以后，该事件只会触发一次
// event.target 是 ul 节点
test.addEventListener(‘mouseenter’, function (event) {
event.target.style.color = ‘purple’;
setTimeout(function () {
event.target.style.color = ‘’;
}, 500);
}, false);
// 进入test节点以后，只要在子Element节点上移动，该事件会触发多次
// event.target 是 li 节点
test.addEventListener(‘mouseover’, function (event) {
event.target.style.color = ‘orange’;
setTimeout(function () {
event.target.style.color = ‘’;
}, 500);
}, false);
（6）mouseout事件，mouseleave事件
mouseout事件和mouseleave事件，都是鼠标离开一个节点时触发。
两者的区别是，mouseout事件会冒泡，mouseleave事件不会。子节点的mouseout事件会冒泡到父节点，进而触发父节点的mouseout事件。mouseleave事件就没有这种效果，所以离开子节点时，不会触发父节点的监听函数。
（7）contextmenu
contextmenu事件在一个节点上点击鼠标右键时触发，或者按下“上下文菜单”键时触发。
MouseEvent对象
鼠标事件使用MouseEvent对象表示，它继承UIEvent对象和Event对象。浏览器提供一个MouseEvent构造函数，用于新建一个MouseEvent实例。
event = new MouseEvent(typeArg, mouseEventInit);
function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}
Mouse Eventの例の属性を説明します.
altKey、ctrlKey、metaKey、shiftKey
次の属性はブール値を返します.マウスイベントが発生した時、キーを押しますか?
// HTML
//
上のコードの中で、Webページをクリックすると、同時にAltキーを押すかどうかを出力します.
ブットン
以下の属性はイベントのマウスボタン情報を返します.
(1)button
ブトン属性は数値を返します.マウスのどのボタンを押したかを表します.
// HTML
//
(2)buttons
buttons属性は3ビットの値を返します.どのキーを同時に押したかを表します.複数のマウスボタンを同時に押す場合を処理します.
clientX,clientY,movement X,movement Y,screenX,screenY
以下の属性はイベントの位置に関連します.
(1)clientX、clientY
clientX属性は、ブラウザウィンドウの左上隅の水平座標に対してマウスの位置を返します.単位はピクセルです.ページが横スクロールするかどうかは関係ありません.
clientY属性は、ブラウザウィンドウの左上隅に対するマウス位置の垂直座標を返します.単位はピクセルで、ページの縦スクロールに関係ありません.
// HTML
//
(2)movementX、movements
movementX属性は水平シフトを返し、単位はピクセルで、現在位置と前のmousemoveイベントとの間の水平距離を表します.数値的には、currentEvent.movement X=currentEvent.screenX-previous Event.screenXに等しい.
movementY属性は垂直シフトを返し、単位はピクセルで、現在位置と前のmousemoveイベントとの間の垂直距離を表します.数値的には、currentEvent.movement Y=currentEvent.screenY-previous Event.screenYに等しい.
(3)screenX、screenY
screenX属性は画面左上隅に対するマウス位置の水平座標を返します.単位はピクセルです.
スクリーンの左上隅に対するマウス位置の垂直座標をピクセル単位でスケールアップします.
// HTML
//
relatedTarget
relatedTarget属性は、イベントの二次相関ノードに戻る.サブ相関ノードがないイベントに対しては、この属性はnullに戻る.
次の表には、異なるイベントのtarget属性とrelatedTarget属性の意味が記載されています.
イベント名
タージ属性
relatedTarget属性
focusin
フォーカスを受けるノード
焦点を失うノード
focusout
焦点を失うノード
フォーカスを受けるノード
モバイルセンター
入るノード
離れるノード
mouseleave
離れるノード
入るノード
mouseout
離れるノード
入るノード
mouseover
入るノード
離れるノード
dragenter
入るノード
離れるノード
dragexit
離れるノード
入るノード
次は一例です.
// HTML
//
//
//
var inner = document.getElementById(“inner”);
inner.addEventListener(“mouseover”, function (){
console.log(‘进入’ + event.target.id + " 离开" + event.relatedTarget.id);
});
inner.addEventListener(“mouseenter”, function (){
console.log(‘进入’ + event.target.id + " 离开" + event.relatedTarget.id);
});
inner.addEventListener(“mouseout”, function (){
console.log(‘离开’ + event.target.id + " 进入" + event.relatedTarget.id);
});
inner.addEventListener(“mouseleave”, function (){
console.log(‘离开’ + event.target.id + " 进入" + event.relatedTarget.id);
});
// 鼠标从outer进入inner，输出
// 进入inner 离开outer
// 进入inner 离开outer
// 鼠标从inner进入outer，输出
// 离开inner 进入outer
// 离开inner 进入outer
wheel事件
wheel事件是与鼠标滚轮相关的事件，目前只有一个wheel事件。用户滚动鼠标的滚轮，就触发这个事件。
该事件除了继承了MouseEvent、UIEvent、Event的属性，还有几个自己的属性。
- deltaX：返回一个数值，表示滚轮的水平滚动量。
- deltaY：返回一个数值，表示滚轮的垂直滚动量。
- deltaZ：返回一个数值，表示滚轮的Z轴滚动量。
- deltaMode：返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页。
浏览器提供一个WheelEvent构造函数，可以用来生成滚轮事件的实例。它接受两个参数，第一个是事件名称，第二个是配置对象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});