事件是同步还是异步?（下）

1. 绑定事件的方法
2. 事件的本质
3. 取消默认事件
4. addEvenListener

一

Dom能够将界面节点转换为一个个对象方便对其操作；
Bom类似提供了很多接口
现有

<button id = 'btn'>一个简单的按钮</button>

二

绑定事件一般分为三种方法:
1Dom0级
①在html中直接添加一个属性:<a href="http://www.github.com" onclick='show()'>github</a>
②在js标记中书写btn.onclick = function(...){}
区别:前者在onclick里书写的是可执行的JavaScript代码,而不是一个函数;后者是直接绑定一个函数

请务必重视这里的区别!

取消默认行为(这里不提事件的那个方式)

我们可以这样取消

    <a href="http://www.github.com" onclick='display(); return false'>github</a>

也可以这样取消

btn.onclick = function(){
	//somecode...
	return false;
}

就是不可以这样取消:

<a href="http://www.github.com" onclick='display()'>github</a>
function display(){
	//...some code
	return false;
}

Why?
由此可以看到我们取消默认行为关键理解html中的onclick只是一个h5属性,其属性的值会被保存在当前对象的onclick属性上,打印一下btn (写在html时 <button id='btn' onclick="show(); return false">click me</button>)

这便是为什么后者又可以因为它是直接绑定的;

总结：Dom0级事件依赖于Dom对象的onclick属性；而两种方式绑定的规则不同；

2** Dom2级**
首先，不存在上述问题因为它压根不依赖onclick属性；
绑定 一个事件监听

btn.addEventListener('click',function(),..)

明确一下，addEventListener是一个函数是一个方法

addEventListener

addEventListener()方法将处理程序注册为元素的侦听器
此方法将指定的监听器注册到当前dom对象上，时间目标可以是任何一个支持事件的对象

关键字：监听器列表

如何实现监听?
在冒泡捕获阶段，来判断event.type达到监听目的，而this的问题也会用bind 或者handleEvent方法解决

同步还是异步问题

事件既然是异步，那和同步代码写在一起不论书写顺序，一定是同步代码先执行；
但实际好并不；

btn.onclick = function(event){
console.log(event);
}
btn.onclick()//直接执行
// undefinde

实际上任何事件的回调都涉及到一个监听，当我们没有监听成功那么便不存在什么事件和回调，只是作为一个普通代码执行了而已;

this问题

先看addEventListener

后续请参考这篇总结事件是同步还是异步-总结