- 绑定事件的方法
- 事件的本质
- 取消默认事件
- addEvenListener
一
Dom能够将界面节点转换为一个个对象方便对其操作;
Bom类似提供了很多接口
现有
<button id = 'btn'>一个简单的按钮</button>
二
绑定事件一般分为三种方法:
1
Dom0级
①在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
后续请参考这篇总结事件是同步还是异步-总结