鼠标事件

事件种类

鼠标事件指与鼠标相关的事件,主要有以下一些。

(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);

  下面的代码是利用click事件进行CSRF攻击(Cross-site request forgery)的一个例子。

<a href="http://www.harmless.com/" onclick="
var f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = 'http://www.example.com/account/destroy';
f.submit();
return false;">伪装的链接</a>

  

(2)dblclick事件

dblclick事件当用户在element、document、window对象上,双击鼠标时触发。该事件会在mousedown、mouseup、click之后触发。

(3)mouseup事件,mousedown事件

mouseup事件在释放按下的鼠标键时触发。

mousedown事件在按下鼠标键时触发。

(4)mousemove事件

mousemove事件当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次代码。

(5)mouseover事件,mouseenter事件

mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。

两者的区别是,mouseover事件会冒泡,mouseenter事件不会。子节点的mouseover事件会冒泡到父节点,进而触发父节点的mouseover事件。mouseenter事件就没有这种效果,所以进入子节点时,不会触发父节点的监听函数。

下面的例子是mouseenter事件与mouseover事件的区别。

// HTML代码为
// <ul id="test">
// <li>item 1</li>
// <li>item 2</li>
// <li>item 3</li>
// </ul> var test = document.getElementById("test"); // 进入test节点以后,该事件只会触发一次
test.addEventListener("mouseenter", function( event ) {
event.target.style.color = "purple";
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false); // 接入test节点以后,只要在子Element节点上移动,该事件会触发多次
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);

  MouseEvent构造函数的第一个参数是事件名称(可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout),第二个参数是一个事件初始化对象。该对象可以配置以下属性。

  • screenX,设置鼠标相对于屏幕的水平坐标(但不会移动鼠标),默认为0,等同于MouseEvent.screenX属性。
  • screenY,设置鼠标相对于屏幕的垂直坐标,默认为0,等同于MouseEvent.screenY属性。
  • clientX,设置鼠标相对于窗口的水平坐标,默认为0,等同于MouseEvent.clientX属性。
  • clientY,设置鼠标相对于窗口的垂直坐标,默认为0,等同于MouseEvent.clientY属性。
  • ctrlKey,设置是否按下ctrl键,默认为false,等同于MouseEvent.ctrlKey属性。
  • shiftKey,设置是否按下shift键,默认为false,等同于MouseEvent.shiftKey属性。
  • altKey,设置是否按下alt键,默认为false,等同于MouseEvent.altKey属性。
  • metaKey,设置是否按下meta键,默认为false,等同于MouseEvent.metaKey属性。
  • button,设置按下了哪一个鼠标按键,默认为0。-1表示没有按键,0表示按下主键(通常是左键),1表示按下辅助键(通常是中间的键),2表示按下次要键(通常是右键)。
  • buttons,设置按下了鼠标哪些键,是一个3个比特位的二进制值,默认为0。1表示按下主键(通常是左键),2表示按下次要键(通常是右键),4表示按下辅助键(通常是中间的键)。
  • relatedTarget,设置一个Element节点,在mouseenter和mouseover事件时,表示鼠标刚刚离开的那个Element节点,在mouseout和mouseleave事件时,表示鼠标正在进入的那个Element节点。默认为null,等同于MouseEvent.relatedTarget属性。

以下属性也是可配置的,都继承自UIEvent构造函数和Event构造函数。

  • bubbles,布尔值,设置事件是否冒泡,默认为false,等同于Event.bubbles属性。
  • cancelable,布尔值,设置事件是否可取消,默认为false,等同于Event.cancelable属性。
  • view,设置事件的视图,一般是window或document.defaultView,等同于Event.view属性。
  • detail,设置鼠标点击的次数,等同于Event.detail属性。

下面是一个例子。

function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}

上面代码生成一个鼠标点击事件,并触发该事件。

以下介绍MouseEvent实例的属性。

altKey,ctrlKey,metaKey,shiftKey

以下属性返回一个布尔值,表示鼠标事件发生时,是否按下某个键。

  • altKey属性:alt键
  • ctrlKey属性:key键
  • metaKey属性:Meta键(Mac键盘是一个四瓣的小花,Windows键盘是Windows键)
  • shiftKey属性:Shift键
// HTML代码为
// <body onclick="showkey(event);"> function showKey(e){
console.log("ALT key pressed: " + e.altKey);
console.log("CTRL key pressed: " + e.ctrlKey);
console.log("META key pressed: " + e.metaKey);
console.log("META key pressed: " + e.shiftKey);
}

  上面代码中,点击网页会输出是否同时按下Alt键。

button,buttons

以下属性返回事件的鼠标键信息。

(1)button

button属性返回一个数值,表示按下了鼠标哪个键。

-1:没有按下键。
0:按下主键(通常是左键)。
1:按下辅助键(通常是中键或者滚轮键)。
2:按下次键(通常是右键)。

  

// HTML代码为
// <button onmouseup="whichButton(event);">点击</button> var whichButton = function (e) {
switch (e.button) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + e.button);
}
}

  

(2)buttons

buttons属性返回一个3个比特位的值,表示同时按下了哪些键。它用来处理同时按下多个鼠标键的情况。

  • 1:二进制为001,表示按下左键。
  • 2:二进制为010,表示按下右键。
  • 4:二进制为100,表示按下中键或滚轮键。

同时按下多个键的时候,每个按下的键对应的比特位都会有值。比如,同时按下左键和右键,会返回3(二进制为011)。

clientX,clientY,movementX,movementY,screenX,screenY

以下属性与事件的位置相关。

(1)clientX,clientY

clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标,单位为像素,与页面是否横向滚动无关。

clientY属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标,单位为像素,与页面是否纵向滚动无关。

// HTML代码为
// <body onmousedown="showCoords(event)"> function showCoords(evt){
console.log(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}

(2)movementX,movementY

movementX属性返回一个水平位移,单位为像素,表示当前位置与上一个mousemove事件之间的水平距离。在数值上,等于currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。

movementY属性返回一个垂直位移,单位为像素,表示当前位置与上一个mousemove事件之间的垂直距离。在数值上,等于currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。

(3)screenX,screenY

screenX属性返回鼠标位置相对于屏幕左上角的水平坐标,单位为像素。

screenY属性返回鼠标位置相对于屏幕左上角的垂直坐标,单位为像素。

// HTML代码为
// <body onmousedown="showCoords(event)"> function showCoords(evt){
console.log(
"screenX value: " + evt.screenX + "\n"
+ "screenY value: " + evt.screenY + "\n"
);
}

 

relatedTarget

relatedTarget属性返回事件的次要相关节点。对于那些没有次要相关节点的事件,该属性返回null。

下表列出不同事件的target属性和relatedTarget属性含义。

事件名称 target属性 relatedTarget属性
focusin 接受焦点的节点 丧失焦点的节点
focusout 丧失焦点的节点 接受焦点的节点
mouseenter 将要进入的节点 将要离开的节点
mouseleave 将要离开的节点 将要进入的节点
mouseout 将要离开的节点 将要进入的节点
mouseover 将要进入的节点 将要离开的节点
dragenter 将要进入的节点 将要离开的节点
dragexit 将要离开的节点 将要进入的节点
// HTML代码为
// <div id="outer" style="height:50px;width:50px;border-width:1px solid black;">
// <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
// </div> 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});

 

键盘事件

键盘事件用来描述键盘行为,主要有keydown、keypress、keyup三个事件。

keydown:按下键盘时触发该事件。

keypress:只要按下的键并非Ctrl、Alt、Shift和Meta,就接着触发keypress事件。

keyup:松开键盘时触发该事件。

// HTML代码为
// <input type="text"
// name="myInput"
// onkeypress="return numbersOnly(this, event);"
// onpaste="return false;"
// /> function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0
|| /\d/.test(String.fromCharCode(oKeyEvent.charCode));
}

  如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。

keydown

keypress

keydown

keypress

(重复以上过程)

keyup

下面就是KeyboardEvent实例的属性介绍。

altKey,ctrlKey,metaKey,shiftKey

以下属性返回一个布尔值,表示是否按下对应的键。

  • altKey:alt键
  • ctrlKey:ctrl键
  • metaKey:meta键(mac系统是一个四瓣的小花,windows系统是windows键)
  • shiftKey:shift键
function showChar(e){
console.log("ALT: " + e.altKey);
console.log("CTRL: " + e.ctrlKey);
console.log("Meta: " + e.metaKey);
console.log("Meta: " + e.shiftKey);
}

  

key,charCode

key属性返回一个字符串,表示按下的键名。如果同时按下一个控制键和一个符号键,则返回符号键的键名。比如,按下Ctrl+a,则返回a。如果无法识别键名,则返回字符串Unidentified。

主要功能键的键名(不同的浏览器可能有差异):Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,CapsLock,Esc,Spacebar,PageUp,PageDown,End,Home,Left,Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,NumLock,Scroll等。

charCode属性返回一个数值,表示keypress事件按键的Unicode值,keydown和keyup事件不提供这个属性。注意,该属性已经从标准移除,虽然浏览器还支持,但应该尽量不使用。

javascript高级程序设计---Event对象二的更多相关文章

  1. javascript高级程序设计---Event对象

    事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...

  2. javascript高级程序设计---Event对象三

    进度事件 进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程.<img>.<audio>.<video>.<st ...

  3. Javascript高级程序设计-对象

    学习Javascript,最难的地方是什么? Object(对象)最难,初学者不容易掌握. Javascript是一种基于对象(object-based)的语言,它的语法中没有class(类). C# ...

  4. javascript高级程序设计---Element对象

    Element对象对应网页的HTML标签元素.每一个HTML标签元素,在DOM树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1,但是不同HTML标签生 ...

  5. 精读《javascript高级程序设计》笔记二——变量、作用域、内存以及引用类型

    变量.作用域和内存问题 执行环境共有两种类型——全局和局部 作用域链会加长,有两种情况:try-catch语句的catch块,with语句. javascript没有块级作用域,即在if,for循环中 ...

  6. 《JavaScript高级程序设计》笔记二

    第二章 在HTML中使用JavaScript 要想把JavaScript放到网页中,就必须涉及到Web的核心语言HTML.向HTML页面中插入JavaScript的主要方法,就是使用<scrip ...

  7. Javascript 高级程序设计--总结【二】

    **********************  Chapter 6  ********************** 属性: 数据属性: Configurable: 能否通过delete 删除属性,默认 ...

  8. javascript 高级程序设计 十二

    1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...

  9. 《Javascript高级程序设计》读书笔记之对象创建

    <javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...

随机推荐

  1. python函数基础

    一.基础 函数的定义 def 函数名(参数): ... 函数体 ... 返回值 #如果函数执行完毕也没有return语句时,自动return None. 空函数 如果想定义一个什么事也不做的空函数,可 ...

  2. UVA1210Sum of Consecutive Prime Numbers(素数打表 + 连续和)

    题目链接 题意:输入一个数n (2 <= n <= 10000) 有多少种方案可以把n写成若干个连续素数之和 打出10000之内的素数表,然后再打出每个可能得到的和的方案数的表 #incl ...

  3. Vector & ArrayList 的主要区别

    1) 同步性:Vector是线程安全的,也就是说是同步的 ,而ArrayList 是线程序不安全的,不是同步的 数2. 2)数据增长:当需要增长时,Vector默认增长为原来一倍 ,而ArrayLis ...

  4. HTML之表格制作

    如何制作一个表格? 如何制作一个表格呢?  观察如下代码: <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 初学java注解编程 记录错误及解决办法

    1 :在form表单提交到controller层时 利用hbim的封装的访问数据库 form表单中属性要加上method方法 不然不成功. 2 :在运行eclipse时 有时粘贴个数据或者删除个字段老 ...

  6. python学习笔记-(九)模块

    基础知识 1. 定义 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑----实现一个功能),本质就是.py结尾的python文件(文件名:test.py,对应的模块就是test) 包:用 ...

  7. PHPCMS后台统计点击量时出现点击数不改变可能丢失了JS代码。

    <script language="JavaScript" src="{APP_PATH}api.php?op=count&id={$id}&mod ...

  8. oc必须知道的知识点

    id数据类型 1.通用的指针类型 2.没有*号 3.使用id类型时,不能给对象的属性或成员变量进行赋值 4.可以对其发送任何(存在的)消息   import与@class的区别 1.import会包含 ...

  9. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  10. 一段发工资的shell代码

    人事发工资条之前是一个个截图发到我们的邮箱里,看人事妹纸是一个善良而又美丽的姑凉,于是乎写了一段shell代码实现批量发短信至各个手机号.不多说了,上代码,其实很简单,我都不好意思上传,还是记录下吧, ...