主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 在浏览器中可能发生的事件类型有很多种。鼠标事件是指与鼠标操作相关的事件。很多对象都能够响应鼠标事件,在DOM中定义了7个鼠标事件。...
在浏览器中可能发生的事件类型有很多种。在“DOM2级事件”中主要有以下几种类型的事件:
鼠标事件是指与鼠标操作相关的事件。很多对象都能够响应鼠标事件,在DOM中定义了7个鼠标事件。
页面中的所有元素都支持鼠标事件。所有的鼠标事件都会冒泡。鼠标事件也可以被取消,取消了鼠标事件不但会影响浏览器的默认行为,还会影响其它的事件。 这些鼠标事件之间存在着一些关联关系。鼠标的 在讲解鼠标事件的时候我们需要了解2个坐标信息:客户区坐标位置和屏幕坐标位置。 鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中。所有的浏览器都支持这两个属性,它们代表鼠标事件发生时鼠标指针在浏览器视口中的水平和垂直坐标。下图展示了浏览器视口中客户端的坐标信息。 要获取鼠标事件的客户端坐标信息,可以使用下面的代码,这里使用了中的跨浏览器添加事件处理程序的方法。 function addEventHandler(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; } } var div = document.getElementById("myDiv"); addEventHandler(div,"click",function(event){ event = event || window.event; console.info("客户端坐标为:("+event.clientX+","+event.clientY+")"); }); 查看浏览器的控制台就可以看到类似”客户端坐标为:(233,271)“的输出结果。 鼠标事件发生的时候,不仅会有相对于浏览器的坐标位置,还会有相对于电脑屏幕的位置,这个位置称为屏幕坐标位置。我们通过screenX和screenY属性就可以知道鼠标事件发生的时候鼠标指针相对于整个屏幕的坐标信息。下图展示了浏览器中鼠标事件的屏幕坐标的含义。 和获取鼠标事件的客户端坐标信息相同,使用下面的方法就可以获取浏览器中鼠标事件的屏幕坐标。 function addEventHandler(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; } } var div = document.getElementById("myDiv"); addEventHandler(div,"click",function(event){ event = event || window.event; console.info("屏幕坐标为:("+event.screenX+","+event.screenY+")"); }); 虽然鼠标事件通常是通过鼠标来触发的,但在按下鼠标的时候,键盘上的某些功能键的状态也可以影响到我们的操作。这些功能键是: DOM为这些功能将规定了4个属性,表示这些功能键的状态。它们是: 当某个鼠标事件发生的时候,通过检查这几个属性值就可以知道用户是否同时按下了某个功能键。例如下面的例子: function addEventHandler(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; } } var div = document.getElementById("myDiv"); addEventHandler(div,"click",function(event){ var keys = new Array(); event = event || window.event; if(event.ctrlKey){ keys.push("Ctrl"); } if(event.shiftKey){ keys.push("shift"); } if(event.altKey){ keys.push("Alt"); } if(event.metaKey){ keys.push("Meta"); } console.info("用户按下的功能键有:"+keys.join(",")); }); 上面的例子在
DOM通过event对象的 IE不支持 我们可以编写一个方法来实现跨浏览器获取鼠标事件的相关元素的方法。 /* 跨浏览器获取鼠标事件的相关元素 */ function getRelatedTarget(event){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.fromElement){ return event.fromElement; }else if(event.toElement){ return event.toElement; }else{ return null; } } 下面是一个具体的例子,在这个例子中,用户将鼠标从一个 function addEventHandler(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; } } function getTarget(event){ return event.target ? event.target : event.srcElement; } function getRelatedTarget(event){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.fromElement){ return event.fromElement; }else if(event.toElement){ return event.toElement; }else{ return null; } } var div = document.getElementById("myDiv"); addEventHandler(div,"mouseout",function(event){ event = event || window.event; var target = getTarget(event); var relatedTarget = getRelatedTarget(event); console.info("鼠标从"+target.tagName+"移出,进入到"+relatedTarget.tagName); }); 在 DOM的 在IE中也提供了
我们可以通过下面的方法来实现跨浏览器获取 function getButton(event){ 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 4: return 2; case 6: return 1; } } } 上面的代码通过 function addEventHandler(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; } } function getButton(event){ 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 4: return 2; case 6: return 1; } } } var div = document.getElementById("myDiv"); addEventHandler(div,"mousedown",function(event){ event = event || window.event; var buttonKey = getButton(event); var info = ""; if(buttonKey == 0){ info = "鼠标左键被按下"; }else if(buttonKey == 1){ info = "鼠标中键被按下"; }else if(buttonKey == 2){ info = "鼠标右键被按下"; } console.info(info); }); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com