【前端自学之路】JS之事件

js 事件模型 事件驱动

什么是事件

也许我们都听说过 国际大事件、深圳某某地又发生什么高空坠物事件,这是我们理解最深刻的事件

Javascript中的事件是指一个即将发生的事情,即将发生什么事情呢? 这代表了什么事件

比如
鼠标点击事件
鼠标滚轮滚动事件
键盘按压事件
浏览器跳转事件

等等一切即将发生或者已经发生的事情,都是事件

事件由哪些组成

事件是由 事件对象 和 事件处理函数 组成

事件对象 是指事件类型,是鼠标点击事件还是浏览器跳转事件还是其他什么事件类型?
事件处理函数 是指事件发生后,我们需要做什么

具体由哪些事件类型

1
2
3
4
5
6
7
8
9
10
11
12
// 点击事件,一般指鼠标点击左键的事件
click

// 鼠标按下事件,代表鼠标按下那瞬间的事件
mousedown

// 鼠标左键起来事件,代表鼠标按下后回弹那瞬间的事件
mouseup

// 键盘按下那刻事件
keydown
...

等等由很多事件类型

如何绑定监听事件

我们想在事件发生的时候做点事情,首先我们需要在事件发生之前监听事件

这个监听动作就是我们现在说的事件绑定

绑定事件的几种方式

  • HTML属性绑定
1
<div onclick="clickHere()">提交代码</div>
1
2
3
4
5
function clickHere(e) {
// you click here
// e 代表事件对象
console.log(e);
}

首先我们定义了一个函数 clickHere ,这个函数就叫事件回调函数或者事件处理函数
其次我们在div元素上绑定了一个属性 onclick ,这个就代表点击事件,并绑定了事件回到函数 clickHere

以上就是一个非常简单的事件绑定,当事件发生的时候,会自动调用 clickHere 函数处理

  • JS动态绑定事件监听器

IE的低版本的实现方式不一样,使用的是 attachEvent,由于标准的统一化,我们先不提这个

W3C标准的事件绑定方法 domNode.addEventListener(event, function, useCapture)

event 代表事件类型
function 事件处理函数
useCapture 可选参数,代表事件捕获或冒泡
    true 代表在捕获阶段触发事件
    false 代表在冒泡阶段触发

我们同样实现和上面一样的事件监听处理

1
<div id="mydiv">提交代码</div>

1
2
3
4
5
6
7
8
var domNode = document.getElementById('mydiv');
domNode.addEventListener('click', clickHere);

function clickHere(e) {
// you click here
// e 代表事件对象
console.log(e);
}

这种方式实现了和第一种方式一样的事件监听

需要注意的是 事件类型是 ‘click’ ,没用加 on 前缀

我们提下 事件委托/代理 技术

首先

我们假设有个ul列表,其中由100个li元素,我们需要在用户点击其中任意一个li元素的时候,做些事情,
这样我们就需要对li的每个元素绑定监听事件,如此一来就有100个事件监听器

但是我们得知道事件监听器越多,总会消耗更多的系统资源,而且响应也会慢一些

其次

我们改进下,我们只对父元素ul进行事件绑定,当点击事件的时候,li的事件会通过冒泡,到达父元素ul上,
因此我们监听的ul事件也能响应,我们在加以判断事件来源于哪个li,我们也可以通过做一些事情

最后

第二种方式,我们就称之为 事件委托/代理
简而言之就是我们把事件处理委托给父元素处理,当事件发生的时候,我们判断下事件来源就可以做响应事情

而且我们只需要绑定一个事件监听器,是不是节省系统资源,加快系统响应速度啦

当然现代框架下,到处都有事件委托代理技术,我们需要学习好原理

1
2
3
4
5
6
7
//父元素绑定事件,代理子元素的点击事件
document.getElementById('parent').addEventListener('click', function(event) {
var curTarget= event.target || event.srcElement;
if (curTarget.tagName.toLowerCase() == 'li') {
//事件处理
}
});
坚持原创技术分享,您的支持将鼓励我继续创作!