本文针对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.relatedTarget与event.target;