DOM 事件
什么是事件
事件的三个特点
- 小 A 订阅/关注/监听了 XXX
- XXX 发生了变化
- 小 A 得到通知
如何监听事件
-
DOM level 0 事件:
button.onclick = function()//给对象button一个oncilck属性并且赋值function() -
DOM level 2 事件： button.addEventListener('click', function(){}) ;
删除button函数方法是将
function(){}赋予一个ID，然后在remove它。例如：
var fn = function(){
console.log(1)
}
button.removeEventListener('click',fn)
- 兼容IE和火狐方案：
if(typeof button.addEventLitener === 'function'){
button.addEventListener('click',function(e){
console.log(e)
})
}else if(typeof button.attachEvent === 'function'){
button.attachEvent('onclick',function(){
console.log(window.event)
})
}else{
button.onclick = function(e){
var fn1 = function(){
console.log(window.event)
}
fi1.call(this,e)
}
}
button.onclick 事件是如何在浏览器运行的
当html中添加了button这个元素并且在JS中添加了button.onclick = function(){console.log('hi')};在页面点击这个button却能在控制台显示'hi'这是为什么呢？在JS中并没有调用这个function。原来是浏览器发现button.onclick有没有赋值，如果有就会在用户点击这个button后执行button.onclick.call(button//this,事件相关信息对象//pageXoffset, which)
在html中给一个元素设置id后这个id就会自动全局变量，并且可以被JS直接调用。元素ID = xxx 等同于var xxx = document.querySelector('#xxx') ;
button.addEventListener 事件是如何在浏览器运行的
在JS中编写点击事件用的button.addEventListener('click', function(){})那么浏览器会把这个点击事件放到click的监听队列里面。在用户点击button的时候浏览器会遍历click这个队列里是否有函数，如果有则按照队列先进先出调用添加function.call(){button,{}};函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id=xx>click me</button>
<script>
xx.addEventListener('click',function(){
console.log(this)
console.log(arguments)
})
// 当用户点击button
// xx.onclick.call(button, MouseEvent)
</script>
</body>
</html>
根据上边的代码用户点击button控制台会返回：
<button id=xx>click me</button>; //this
[MouseEvent, callee: function, Symbol(Symbol.iterator): function] //点击时的相关信息
上边两种监听事件区别是
button.addEventListener队列代替了属性，这样好处是可以监听多个函数会很简单
事件机制：冒泡 & 捕获
基础知识
- 操作系统最先知道用户点击了鼠标，浏览器次之
- child 被点击了，意味着 parent 也被点击了
- 如果我同时监听了 child 和 parent，那么谁先通知我？这是个问题。
捕获阶段
parent 先通知，child 后通知
button.addEventListener('click', fn, true)
冒泡阶段
child 先通知，parent 后通知
onclick 就是在冒泡阶段被通知
button.addEventListener('click', fn)
阻止默认事件
方法一: 添加 onclick = “returnfalse”
<a href = "https://baidu.com" onclock = "return false">百度</href>
方法二: 在JS中添加 button.onclick = function(){return false};
<script>
button.onclick = function(){return false};
</script>
方法三:JS中添加event.preventDefault()
<script>
button.addEventListener('click',function(event){
event.preventDefault()
})
</script>
停止冒泡
<script>
button.addEventListener('click',function(event){
console.log(event)
event.stopPropagation() //停止冒泡
})
</script>
e / event 是哪来的？
Event接口表示在DOM中发生的任何事件.一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。
e.target V.S. e.currentTarget
网友评论