事件 浏览器客户端上客户触发的行为都称为事件
所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发
通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法
事件名:onmouseover onmouseout onmousedown onmousemove onmouseup
Onclick onchange onfocus onblur 等等
当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上。
我们把他叫事件对象
事件对象 event
1.event兼容性:
在Chrome下event是undefined 在ie低版本下是null 分支持event和不支持event 支持event就直接widnow.event 不支持把e在
2.写法:
document.onclick=function(e){var e = e || window.event}
事件冒泡
1.什么是事件冒泡
当给父子元素的同一事件绑定时 触发了子元素身上的事件 执行完毕之后 也会触发父级元素的相同事件
这种传播叫事件冒泡
2.解决冒泡
event对象有个属性叫cancelBubble 默认值是false 改成true就取消当前事件冒泡
事件捕获
1.事件写法:
①第一种写法:obj.onclick=function(){ }这就相当于给obj的onclick属性赋值是一个道理
↑↑↑这种写法有一点不好 给元素绑定同一个事件的时候 后者会把前者覆盖掉
②第二种写法:
标准浏览器用:addEventListener()这个方法
addEventListener(参数1,参数2,参数3)
参数 1 是事件名 事件名不带on
参数 2 是事件函数
参数 3 布尔值 默认值是false false改成true那么冒泡模型直接变成捕获模型
③id低版本用:attachEvent()这个方法
2.捕获知识点
①ie低版本没有捕获
②普通事件绑定写法没有捕获
3.什么是事件捕获
给父子元素用addEventListener( )绑定同一个事件时 当触发子元素身上的事件 会先触发父元素身上的事件
attachEvent()与 addEventListener()二者的区别
1.attachEvent 只用在ie8以下 addEventListener 只用在标准浏览器
2.attachEvent 事件名带on 后者不带on
3.attachEvent 函数里的this是window 而后者函数里面的this是当前元素对象
4.attachEvent 只有冒泡没有捕获 而后者有冒泡也有捕获
call( ) 和 apply( )
call 和 apply就是改变 函数 里面的this指向的方法
1.使用
xxx.call() xxx.apply() 特别强调xxx必须是函数(普通函数,类,构造函数)
2.注意
①call( )中的第一个参数是null的时候 函数里的this还是指向原来的 不变
②所有事件都是异步的