理解事件流及事件对象
2015-10-24 12:35
274 查看
理解事件流及事件对象
事件流:描述的是从页面中接收事件的顺序,包括事件冒泡流和事件捕获流。现在大部分浏览器都使用的事件冒泡流。
1. HTML事件处理程序
在html代码中直接镶嵌js代码,实现事件处理程序。
2. DOM0级事件处理程序
先把元素取出来,然后单独在js块中以添加属性的形式添加事件(最为常用)。
3. DOM2级事件处理程序(IE不兼容)
定义了2中方法,用于处理和删除指定事件处理程序的操作
addEventListener() 和 removeEventListener();
接收三个参数:要处理的事件名,事件处理的程序,布尔值(一般设为false)
注意:事件名前的on要去掉(如click, mouseover等)
参数中的布尔值true表示事件流为捕获流,事件在捕获阶段执行程序
false表示事件流为冒泡流,一般浏览器都为事件冒泡流
4. IE事件处理程序
attachEvent() 添加事件
detachEvent() 删除事件
接收两个参数:要处理的事件名,事件处理程序
注意:事件名前的on必须保留(如onclick, onmouseover等)
支持IE事件处理程勋的浏览器有:IE、Opera
5. 跨浏览器事件处理程序
将各个事件处理程序加以封装
对封装好的跨浏览器事件处理程序进行调用:
eventUtil.addHandler(btn1,”click”,showMess);
function showMess(){alert(“btn1的元素类型是:” + btn1.type);}
事件对象:
在触发DOM上的事件时,都会产生一个对象(事件对象event)
function showEvent( event ){ alert(event.type); } //返回对象类型
1. DOM中的事件对象
(1)type属性 用于获取事件类型
(2)target属性 用于获取事件对象的目标
(3)stopPropagation()方法 阻止事件冒泡
(4)preventDefault()方法 阻止事件默认行为
2. IE中的事件对象
(1)type属性 用于获取对象类型
(2)srcElement属性 获取对象目标
(3)cancelBubble属性 阻止事件冒泡(true表阻止)
(4)returnValue属性 阻止事件默认行为(false表阻止)
相关文章推荐
- Activity(undone)
- linux下打开、关闭tomcat,实时查看tomcat运行日志
- codevs 1183 泥泞的道路
- js模块加载之AMD和CMD
- U-boot-2010.09移植(六)NAND Flash启动支持
- C++函数指针简介
- C++函数指针简介
- [原]Android Studio使用极光推送出现at cn.jpush.android.service.ServiceInterface.a(Unknown Source) 已解决
- Hibernate-映射关系- n->1(单向)
- FL2440的U-boot-2009.08移植(五)uboot架构中NAND Flash驱动修改
- POJ 1182——食物链——————【种类并查集】
- Corona的工程配置
- FL2440的U-boot-2009.08移植(四) 支持DM900网卡
- hdoj 2063 过山车 【双边匹配匈牙利算法】
- 设计模式之Builder模式
- 利用UIWebView打造一个炫酷的视频背景视图(OC & Swift)
- jquery 设置style:display
- 50. PHP 页面静态化(3)
- 九度OJ 1142:Biorhythms(生理周期) (中国剩余定理)
- FL2440的U-boot-2009.08移植(三)支持Nor FLASH