1.事件的三要素
事件源【农业银行】
DOM对象
事件处理函数 【警局出警,处理抢劫事件】
匿名函数,在未来的某个时刻当绑定的事件发生的时候执行
浏览器来进行调用
事件对象 【抢劫事件所有记录】
记录事件发生的详细信息
2.事件绑定
1)普通的属性绑定 onXxx
兼容性强,所有的浏览器都支持
dom.onXxx = handler;
2)方法绑定 addEventListener()
适用于非IE低版本浏览器,IE9以下都不支持
dom.addEventListener(eventType,handler,useCapture)
eventType 事件类型
handler 事件处理函数
useCapture 是否在捕获阶段调用,默认false
3)方法绑定 attachEvent()
适用于IE低版本浏览器,IE9以下都支持
dom.addEventListener(eventType,handler)
3.事件流
前提:元素嵌套
事件捕获
由外而内
事件冒泡 反馈
由内而外
4.事件对象
由浏览器构建,传递到事件处理函数中
event是MouseEvent的实例,MouseEvent继承Event
实例属性
type
事件类型
target
目标dom对象,指的是实际操作的那个dom对象
currentTarget
出现在事件冒泡中,指向当前这个dom对象
实例方法
preventDefault()
阻止事件的默认行为
stopPropagation()
停止冒泡
5.事件代理
不直接将事件处理函数绑定到dom元素,而是绑定在其父级元素上,好处是父级元素的子元素可以任意的变化,比如增减。当事件发生时通过event.target获取子元素
mouseover 支持事件代理,可以识别子元素
mouseenter 不支持,不识别子元素
mouseout 支持
mouseleave 不支持