JavaScript焦点事件、鼠标事件和滚轮事件使用详解

标签:帮助中心    日期:2017-11-07 09:15    录入:汇盛国际平台    浏览:

  

[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事件  

  

滚轮事件  

  

客户区坐标位置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);  };  
  
  

页面坐标位置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);  };  
  
  

屏幕坐标位置screenX和screenY;  

  

通过该属性可以获得相对于屏幕的坐标。

  

  

修改键  

  

修改键有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);  }  
 
★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
        
上一篇:强制设为首页代码
下一篇:没有了