// JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;

// 最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;

// 此外还可以修改一般事件的捕获/冒泡流的函数;

一 事件对象

 // 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息;
// 事件处理由三部分组成:对象.事件处理函数=函数;
document.onclick = function(){
alert('Lee');
}
// PS:以上程序解释:click表示一个事件类型,单击;
// onclick:表示一个事件处理函数绑定对象的属性(或者叫事件监听器);
// document:表示一个绑定的对象,用于触发某个元素区域;
// function():匿名函数被执行的函数,用于触发后执行; // 除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数;
document.onclick = box; // 直接赋值函数名即可,无须括号;
function box(){
alert('Lee');
} // this关键字和上下文
// 在 面向对象 那章我们了解到:在一个对象里,由于作用域的关系,this代表着离它最近的对象;
var input = document.getElementsByTagName('input')[0];
input.onclick = function(){
alert(this.value); // HTMLInputElement,this表示input对象;
}
 // 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息;
// 包括导致事件的元素/事件的类型/以及其它与特定事件相关的信息;
// 事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的;
// 首先,我们必须验证一下,在执行函数中有没有传递参数,是否可以得到隐藏的参数;
function box(){ // 普通空参函数;
alert(arguments.length); // 0;没有得到任何传递的参数;
}
input.onclick = function(){ // 事件绑定的执行函数;
alert(arguments.length); // 1;得到一个隐藏参数;
}
// PS:通过上面两组函数,我们发现,通过事件绑定的执行函数是可以得到一个隐藏参数的;
// 说明,浏览器会自动分配一个参数,这个参数其实就是event对象;
input.onclick = function(){
alert(arguments[0]); // MouseEvent,鼠标事件对象;
} // 上面这种做法比较麻烦,那么比较简单的做法是,直接通过接收参数来得到即可;
input.onclick = function(evt){ // 接受event对象,
alert(evt); // MouseEvent,鼠标事件对象;
} // 直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可;
input.onclick = function(evt){
var e = evt || window.event;
alert(e); // 实现跨浏览器兼容获取event对象;
}

二 鼠标事件

// 鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备;

// 通过事件对象可以获取到鼠标按钮信息屏幕坐标获取等;

 1.鼠标按钮
// 只有在主鼠标按钮被单击时(一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的;
// 但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮;
   非IE(W3C)中的button属性
值 说明
0 表示主鼠标按钮(一般是鼠标左键);
1 表示中间的鼠标按钮(鼠标滚轮按钮);
2 表示次鼠标按钮(一般是鼠标右键);
IE中的button属性
1 表示主鼠标按钮(一般是鼠标左键);
2 表示次鼠标按钮(一般是鼠标右键);
4 表示按下了中间的鼠标按钮;
// 鼠标按钮兼容;
function getButton(evt){
var e = evt || window.event;
if(evt){ // Chrome浏览器支持W3C和IE标准;
return e.button; // 要注意判断顺序;
}else if(window.event){
switch(e.button){
case 1:
return 0;
case 4:
return 1;
case 2:
return 2;
}
}
}
document.onmouseup = function(evt){
if(getButton(evt) == 0){
alert('按下了鼠标左键!');
}else if(getButton(evt) == 1){
alert('按下了中键');
}else if(getButton(evt) == 2){
alert('按下了右键!');
}
}
 2.可视区及屏幕坐标
// 事件对象提供了两组来获取浏览器坐标的属性:
// 一组是页面可视区坐标;
// 一组是屏幕坐标;
坐标属性
属性 说明
clientX 可视区X坐标,距离左边框的距离;
clientY 可视区Y坐标,距离上边框的距离;
screenX 屏幕区X坐标,距离左屏幕的距离;
screenY 屏幕区Y坐标,距离上屏幕的距离;
pageX 页面中X坐标,距离整个页面左边框的距离;
pageY 页面中Y坐标,距离整个页面上边框的距离; // 判断鼠标点击位置函数;
document.onclick = function(evt){
var e = evt || window.event;
alert(e.clientX+','+e.clientY);
alert(e.screenX+','+e.screenY);
alert(e.pageX+','+e.pageY);
}
// PS:在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等;
// IE8以下不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来;
// 这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollTop和scrollLeft属性;
// pageX和pageY兼容函数;
var div = document.getElementById('myDiv');
addEventListener(div,'click',function(evt){
var evt = event || window.event;
var pageX = evt.pageX,
pageY = evt.pageY;
if(pageX === undefined){
pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined){
pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);
}
alert(pageX+pageY);
});
 3.修改键
// 有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件;
// 这些键为:Shift/Ctrl/Alt和Meat(Window中是Windows键,苹果机中是Cmd键);
// 它们经常被用来修改鼠标事件和行为,所以叫修改键;
修改键属性
属性 说明
shiftKey 判断是否按下了Shift键;
ctrlKey 判断是否按下了ctrlKey键;
altKey 判断是否按下了alt键;
metaKey 判断是否按下了windows键,IE不支持; // 判断按键函数;
function getKey(evt){
var e = evt || window.event;
var keys = [];
if(e.shiftKey) keys.push('shift');    // 判断是否同时按下了shift键;
if(e.ctrlKey) keys.push('ctrl');
if(e.altKey) keys.push('alt');
return keys;
}
document.onclick = function(evt){
alert(getKey(evt));             // 得到一个数组,可能包含shift/ctrl/alt的值;
}

三 键盘事件

// 用户在使用键盘时会触发键盘事件;

// "DOM2级事件"最初规定了键盘事件,后来又删除了相应的内容;

// 最终还是使用最初的键盘事件,不过IE9已经率先支持"DOM3"级键盘事件;

 1.键码
// 在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应;
// 对数字字母字符集,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同;字母中大小写不影响;
document.onkeydown = function(evt){
alert(evt.keyCode);
}
 2.字符编码
// Firefox/Chrome/Safari的event对象都支持一个charCode属性;
// 这个属性只有在发生keypress事件时才会包含值,而这个值是按下的那个键所代表字符的ASII编码;(也包含除数字和字母以外的按键);
// 此时的keyCode通常等于0或者也可能等于所按键的编码;
// IE和Opear则是在keyCode中保存字符的ASCII编码;
function getCharCode(evt){
var e = evt || window.event;
if(typeof e.charCode == 'number'){
return e.charCode;
}else{
return e.keyCode;
}
}
document.onkeypress = function(evt){
alert(getCharCode(evt));
}
// PS:可以使用String.fromCharCode()将ASCII编码转换成实际的字符;

四 W3C与IE

// 在标准的DOM事件中,event对象包含与创建它的特定事件有关的属性和方法;

// 触发的事件类型不一样,可用的属性和方法也不一样;

             W3C中event对象的属性和方法
属性/方法 类型 读/写 说明
bubbles Boolean 只读 表明事件是否冒泡;
cancelable Boolean 只读 表明是否可以取消事件的默认行为;
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素;
detail Integer 只读 与事件相关的细节信息;(一般用于滚轮信息的值);
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段;
preventDefault() Function 只读 取消事件的默认行为;如果cancelable的值是true,则可以使用这个方法;
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡;如果bubbles的值为true,则可以使用这个方法;
target Element 只读 事件的目标;
type String 只读 被触发的事件的类型;
view AbstractView 只读 与事件关联的抽象视图;等同于发生事件的window对象;
             IE中的event对象的属性
属性 类型 读/写 说明
cancelBubble Boolean 读写 默认值为false,但将其设置为true就可以取消事件冒泡;
returnValue Boolean 读写 默认值为true,但将其值设置为false就可以取消事件的默认行为;
srcElement Element 只读 事件的目标;
type String 只读 被触发的事件类型;
 // 兼容target和srcElement函数
function getTarget(evt){
var e = evt || window.event;
return e.target || e.srcElement; // 兼容得到事件目标DOM对象;
}
document.onclick = function(evt){
var target = getTarget(evt);
alert(target);
}

五 事件流

// 事件流是描述的从页面接收事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么点击其中一个元素;
// 并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件;
// 事件流包含两种模式:冒泡和捕获;
1.事件冒泡
// 是从里往外逐个触发;
2.事件捕获
// 是从外往里逐个触发;
 // 现代浏览器都是冒泡类型;而捕获模式是早期的Netscape默认情况;
// 现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式;
document.onclick = function(){
alert('我是document');
}
document.documentElement.onclick = function(){
alert('我是html');
}
document.body.onclick = function(){
alert('我是body');
}
document.getElementById('box').onclick = function(){
alert('我是div');
}
document.getElementsByTagName('input')[0].onclick=function(){
alert('我是input');
}
// PS:点击input会逐级冒泡到document;
 // 阻止事件冒泡兼容函数
function stopPro(evt){
var e = evt || window.event;
// 如果存在cancelBubble,则是IE浏览器,将其值设为true就可以阻止事件冒泡;
// 否则执行W3C中的阻止事件冒泡方法stopPropagation();
window.event ? e.cancelBubble = true : e.stopPropagation();
}

JavaScript--事件对象(25)的更多相关文章

  1. 第一百二十节,JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  2. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  3. JavaScript事件对象

    一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  4. JavaScript事件对象【转】

    一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  5. Javascript 事件对象(二)event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  6. javascript 事件对象

    1.事件对象  用来记录一些事件发生时的相关信息的对象  A.只有当事件发生的时候才产生,只能在处理函数内部访问  B.处理函数运行结束后自动销毁2.如何获取事件对象  IE: window.even ...

  7. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  8. JavaScript 事件对象event

    什么是事件对象? 比如当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 注:事件通常与函数结合使用,函数不会在事件发生前被执 ...

  9. JavaScript事件对象属性e.target和this的区别

    前言: Event对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象eve ...

  10. Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. POJ 2492

    #include<iostream> #include<stdio.h> #define MAXN 2050 using namespace std; int pre[MAXN ...

  2. How To Crop Bitmap For UWP

    裁剪图片主要是借助于 BitmapDecoder.GetPixelDataAsync() 以及 BitmapTransform对象来实现. 实现的代码如下: using System; using S ...

  3. Flyweight享元模式(结构型模式)

    1.面向对象的缺点 虽然OOP能很好的解决系统抽象的问题,并且在大多数的情况下,也不会损失系统的性能.但是在某些特殊的业务下,由于对象的数量太多,采用面向对象会给系统带来难以承受的内存开销.示例代码如 ...

  4. Mac 下安装.NET Core 与 CLI

    .NET Foundation:https://github.com/dotnet/home .NET Core:https://github.com/dotnet/coreclr CLI:https ...

  5. asp.net core web 添加角色管理

    新建asp.net core web应用 添加RolesAdminController [Authorize(Roles = "Admin")] public class Role ...

  6. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  7. JavaScript -- FileSystemObject

    -----056-FileSystemObject.html----- <!DOCTYPE html> <html> <head> <meta http-eq ...

  8. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  9. 第k大的数

    问题描述:输入一组数,指定一个k,输出这组数里第k大的数. 一般这种题目,第一想法是把整个数组先排序后,再选取第k位的数.但是这样做实际上浪费了大量的时间在排序上,我们只是要求第k大的数,并非要把整个 ...

  10. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(七):集成 Druid 数据源

    数据库连接池负责分配.管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个:释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏 ...