DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript事件類型中焦點、鼠標和滾輪事件詳解
JavaScript事件類型中焦點、鼠標和滾輪事件詳解
編輯:關於JavaScript     

本文針對JavaScript 事件中“事件類型”下“焦點、鼠標和滾輪事件”的注意要點進行整理,分享給大家供大家參考,具體內容如下

一、焦點事件

一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有:

  • blur:元素失去焦點,不會冒泡;
  • DOMFocusIn:同HTML事件focus,於DOM3遭廢棄,選用focusin;
  • DOMFocusOut:同HTML事件blur,於DOM3遭廢棄,選用focusout;
  • focus:元素獲得焦點,不回冒泡;
  • focusin:獲得焦點,與HTML事件focus等價,但會冒泡;
  • focusout:失去焦點,與HTML事件blur等價;

如:

window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

當焦點從頁面中的一個元素轉移到另一個元素會觸發下面的事件:

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

二、鼠標事件

DOM3級事件中定義了9個鼠標事件:

  • click
  • dblclick
  • mousedown:用戶按下任意鼠標按鈕時觸發,不能通過鍵盤觸發這個事件;
  • mouseup:用戶釋放鼠標按鈕時觸發,不能通過鍵盤觸發這個事件;
  • mousemove:不能通過鍵盤觸發這個事件;
  • mouseenter:不冒泡,且光標移動到後代元素上不會觸發;
  • mouseleave:不冒泡,且光標移動到後代元素上不會觸發;
  • mouseover:光標移動到後代元素上會觸發;
  • mouseout:光標移動到後代元素上會觸發;

舉例如下:

div.onmouseover = function() {
  console.log('mouseover'); //在子元素上會觸發
}
div.onmouseout = function() {
  console.log('mouseout'); //在子元素上會觸發
}
div.onmouseenter = function() {
  console.log('mouseenter'); //在子元素上不會觸發
}
div.onmouseleave = function() {
  console.log('mouseleave'); //在子元素上不會觸發
}

只有在同一個元素上相繼除法mousedown和mouseup事件,才會觸發click事件;只有觸發兩次click事件,才會觸發依次dblclick事件。

順序如下:

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

IE8之前的版本中有一個bug,在雙擊事件中,會跳過第二個mousedown和click事件

三、滾輪事件

1、客戶區坐標位置clientX和clientY屬性

如:

window.onmousemove = function() {
    clickX = event.clientX;
    clickY = event.clientY;
    var div = document.createElement("img");
    div.src = "hhh.gif"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

2、頁面坐標位置pageX與pageY;

window.onclick = function() {
    clickX = event.pageX;
    clickY = event.pageY;
    var div = document.createElement("img");
    div.src = "ppp.png"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

在IE8及更早版本中不支持這個頁面坐標位置,可以計算出來,需要用到混合模式下的document.body和標准模式下的document.documentElement中的scrollLeft和scrollTop屬性:

if (clickX === undefined) {
  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};

3、屏幕坐標位置screenX和screenY;

通過該屬性可以獲得相對於屏幕的坐標。

4、修改鍵

修改鍵有Shift、Ctrl、Alt、Meta(window上的Windows鍵,蘋果機上的Cmd鍵);對應的修改鍵的狀態是shiftKey、ctrlKey、altKey、metaKey,這些屬性包含的都是布爾值,如果相應的鍵被按下了,則為true,否則為false。如:

var array = [];
var timing = setTimeout(showArray, 100);

window.onclick = function() {
  if (event.shiftKey) {
    array.push("shift");
  };
  if (event.ctrlKey) {
    array.push("ctrl");
  };
  if (event.altKey) {
    array.push("alt");
  };
  if (event.metaKey) {
    array.push("meta");
  };
};

function showArray() {
  var str = array.toString();
  var newP = document.createElement("p");
  newP.appendChild(document.createTextNode(str));
  document.body.appendChild(newP);
  timing = setTimeout(showArray, 1000);
}

5、相關元素

event.relatedTargetevent.target;

relatedTarget屬性提供了相關元素的信息。這個屬性只對於mouseover和mouseout事件才包含值;對於其他事件的值則是null;IE8之前的版本不支持relatedTarget屬性,在mouseover事件觸發時,IE的fromElement屬性中保存了相關元素;在mouseout事件觸發時,IE的toElement屬性中保存著相關元素。

如:

var dot = document.getElementById("dot");
dot.onmouseout = function (){
  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);
};

如:

function getRelatedTarget() {
  if (event.ralatedTarget) {
    return event.relatedTarget;
  } else if (event.toElement) {
    return event.toElement;
  } else if (event.fromElement) {
    return event.fromElement;
  } else {
    return null;
  }
}

四、鼠標按鈕

1、button屬性

DOM的event.button屬性有三個值:0為主鼠標按鈕、1為中間鼠標按鈕、2為次鼠標按鈕。在常規設置中,主鼠標按鈕就是鼠標左鍵;次鼠標按鈕就是鼠標右鍵。

IE8及之前的版本也提供了button屬性,但這個屬性的值與DOM的button屬性有很大差異:

  • 0:沒有按下鼠標按鈕;
  • 1:主鼠標按鈕;
  • 2:次鼠標按鈕;
  • 3:同時按下主鼠標按鈕和次鼠標按鈕;
  • 4:中間鼠標按鈕;
  • 5:同時按下主鼠標按鈕和中間鼠標按鈕;
  • 6:同時按下次鼠標按鈕和中間鼠標按鈕;
  • 7:同時按下三個鼠標按鈕

兼容版:

function getButton() {
  if (document.implementation.hasFeature("MouseEvents", "2.0")) {
    return event.button;
  } else {
    switch (event.button) {
      case 0:
      case 1:
      case 3:
      case 5:
      case 7:
        return 0;
      case 2:
      case 6:
        return 2;
      case 4:
        return 1;
    }
  }
}

另外,如果要屏蔽鼠標右鍵,應該使用:

document.oncontextmenu = function(event) {
  // if (window.event) {
  //   event = window.event;
  // }
  // try {
  //   var the = event.srcElement;
  //   if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
  //     return false;
  //   }
  //   return true;
  // } catch (e) {
  //   return false;
  // }
  return false;
}

這個事件是HTML5定義的,以後再討論

2、更多的事件信息

detail屬性

對於鼠標事件來說,detail包含了一個數值,表示在給定位置上發生了多少次單擊(一次mousedown和一次mouseup),次數從1開始計數,如果mousedown和mouseup之間移動了位置,detail會被重置0,如果單擊間隔太長也會被重置為0.

3、鼠標滾輪事件

mousewheel事件和wheelDelta屬性

在垂直放向上滾動頁面時,就會觸發mousewheel,event對象裡面的wheelDelta屬性則表示當用戶向前滾動滾輪時,wheelDelta是120的倍數;當向後滾動滾輪時,wheelDelta是-120的倍數。如:

var clientHeight = document.documentElement.clientHeight;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].style.height = clientHeight + "px";
};

window.onmousewheel = function () {
  if (event.wheelDelta <= -120) {
    window.scrollBy(0,clientHeight);
  }else if(event.wheelDelta >= 120){
    window.scrollBy(0,-clientHeight);
  };
}

另外,在Opera 9.5之前的版本中,wheelDelta值的正負號是顛倒的。

此外,Firefox支持一個名為DOMMouseScroll的類似事件,也是在鼠標滾動滾輪時除法。有關鼠標滾輪的信息保存在detail屬性中。向前滾動這個屬性的值為-3的倍數,向後滾動,這個屬性的值是3的倍數。

通用版:

function getWheelDelta() {
  if (event.wheelDelta) {
    return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
  } else {
    return -event.detail * 40;
  };
}

4、觸摸設備

iOS和Android設備中:

  • 不支持dblclick;
  • 輕擊可單擊元素會觸發mousemove;如果此操作會導致內容變化,將不再有其他事件發聲;如果屏幕沒有發生變化,那麼依次發生mousedown、mouseup和click事件;
  • mousemove事件也會觸發mouseover和mouseout事件;
  • 兩個手指操作會觸發mousewheel和scroll;

5、無障礙性問題

  • 使用click事件執行代碼;
  • 不要使用onmouseover向用戶顯示新的信息;
  • 不要使用dblclick執行重要的操作;

以上就是本文的全部內容,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved