Skr-Eric的Javascript课堂（六）——JS的事件、事件对象和事件处理机制

事件

1. 事件是由用户行为激发的操作

2. 事件处理函数

1. 鼠标事件 ：

onclick 单击

ondblclick 双击

onmouseover 鼠标移入元素

onmouseout 鼠标移出元素

onmousemove 鼠标在元素内移动

2. 加载完毕后执行

onload 元素或文档加载完毕之后触发

3. 状态改变事件

常用于表单元素

onfocus 表单元素获取到焦点时触发

onblur 失去焦点时触发

onchange 元素内容发生改变并且元素失去

焦点时触发

oninput 实时监听输入，只要输入内容发生

变化，都会触发

onsubmit 当表单被提交时触发：

当用户点击提交按钮时，自动触发，

用来验证表单是否可以提交给服务器，

允许返回布尔值，表示数据是否可以

发送。

4. 键盘事件

onkeydown 键盘按键被按下时触发

onkeyup 按键抬起时触发

onkeypress 键盘被按压

3. 事件绑定方式

将事件处理函数绑定到元素节点上，由用户对元素

节点的不同操作，触发相应的事件

1. 内联方式

在标签中通过属性的方式绑定事件

<button onclick = "alert('单击');">点击</button>

2. js 动态绑定事件

div.onclick = function(){

//事件触发后要执行的操作

};

3. W3C 标准事件监听

div.addEventListener('click',function(){});

function clickEvent(){

}

div.addEventListener('click',clickEvent);

4. this 关键字

this 表示当前函数或方法的调用者

1. 全局函数由window调用，所以全局函数中的this指的是

window对象

2. 事件处理函数中使用this，指的是当前事件的触发对象

 事件对象

1. 事件对象伴随事件触发产生,包含当前事件相关的所有信息

2. 获取事件对象

事件对象伴随事件发生，自动产生，由浏览器以参数的形式

传入到事件处理函数中，我们只需要接收参数就可以

3. 事件对象的属性

1. target / srcElement

表示当前事件的触发对象

et :

console.log(evt.target);

2. 不同的事件类型对应的事件对象中包含的信息也不同

1. 鼠标事件对象常用属性

1. offsetX offsetY

获取鼠标在元素上的坐标位置

默认元素左上角为原点

2. clientX clientY

获取鼠标在网页上的坐标位置

3. screenX screenY

获取鼠标在屏幕上的坐标信息

2. 键盘事件对象的常用属性

1. onkeydown 事件

1. which 属性

获取当前按键的键码

对于大小写字母不进行区分

2. onkeypress 事件

1. key 属性

获取当前按键对应的字符

2. which 属性

获取按键对应的ASC码 区分大小写

 事件处理机制

1. 事件传递 ：

当页面元素触发事件时，其他相关元素都会接收到这个事件，

可以选择对事件作出处理

2. 事件传递机制 ：

指页面中元素处理事件的顺序

1. 分类 ：

1. 冒泡

冒泡传递指事件由里向外传递，是默认的传递机制

2. 捕获

捕获指事件从外向里传递，IE不支持

W3C标准事件监听函数：

addEventListener(param,fun,boolean)

参数 ：

param : 事件函数名，取消on前缀

et : "click"

fun : 事件触发要执行的操作，通常以匿名函数给出

boolean :默认为false,可以省略，表示冒泡传递。

设置为true,表示捕获传递

2. 阻止事件传递

evt.stopPropagation();(默认冒泡情况下)

想要看更多的课程请微信关注SkrEric的编程课堂