【总结整理】JavaScript的DOM事件学习(慕课网)
事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间
HTML和JavaScript的交互通过事件 来实现
比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换
本章内容
1、理解事件流
2、使用事件处理程序
3、不同的事件类型
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
直接赋值在标签上,用事件调用,麻烦,改动至少要改两个地方
2、DOM0级事件处理程序
比较传统的方式:把一个函数赋值给一个事件的处理程序的属性,简单,可跨浏览器
btn2.onclick=showMessage;// 函数调用不加引号不叫括号
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()
它们都接收三个参数:
要处理的事件名;//去掉on
作为事件处理程序的函数;// 函数调用不加引号不叫括号
一个布尔值。//主要用false
true在捕获阶段调用事件处理程序,false在冒泡阶段调用事件处理程序(主要)
btn3.addEventListener('click',showMessage,false);//ie不起作用
btn3.removeEventListener('click',showMessage,false)
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
btn3.attachEvent('onclick',showMessage);
btn3.detachEvent('onclick',showMessage);//事件还是要有on
这两个方法接收相同的两个参数:(事件处理程序名称, 事件处理函数)//两个参数的原因:因为IE8及更早期的版本只支持事件冒泡,默认加到冒泡阶段
支持ie事件处理器的浏览器有ie和opera
5、跨浏览器的事件处理程序
//element.'on'+type
//element.('on'+type)
//element.onclick===element['onclick']
js中用element.加属性都等价于element[]
三、事件对象
事件对象event : 在触发DOM上的某个事件的时候都会产生一个事件对象
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:用于获取事件目标,事件给谁加上,事件来自于哪个属性 或者节点名称(element.target.nodeName)
(3)、event.stopPropagation() 阻止事件冒泡 event.preventDefault() 写了这个函数后,就不会向上冒泡
(4)、event.preventDefault() 阻止事件的默认行为
默认行为:比如:<a href='#'>超链接</a>
a标签的默认行为就是跳转
bubbles属性 canselable属性
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:用于获取事件的目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为