事件处理-事件流
2017-08-04 22:33
11 查看
事件流----描述的是从页面中接受事件的顺序。 IE----事件冒泡流
Netscape----事件捕获流
事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)
事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
事件处理程序
1. HTML事件处理程序:缺点--JS代码和html代码紧密耦合,当需要修改时,JS 代码和 HTML 代码均需要修改
2. DOM0级事件处理程序:较为传统的方式:把一个函数赋值给一个事件的处理程序属性用的最多的方法 比较简单,跨浏览器的优势修改时不影响html3. DOM2级事件处理程序
DOM2级事件定义了两个方法:
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener()
接受三个参数:要处理的事件名,作为事件处理程序的函数和布尔值。
DOM0和DOM2的优点:可以添加多个事件处理程序
4. IE事件处理程序及跨浏览器解决
attachEvent() 添加事件
detachEvent() 删除事件
接受相同的两个参数 :事件处理程序的名称和事件处理程序的函数
不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡!
5. 跨浏览器的事件处理程序
var eventUtil={//添加句柄addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}else if(element.attachEvent){element.attachEvent('on'+type,handler);}else{element['on'+type]=handler;// element.onclick==element['onclick'];}},//删除句柄removeHandler:function(element,type,handler){if(element.addEventListener){element.removeEventListener(type,handler,false);}else if(element.attachEvent){element.detachEvent('on'+type,handler);}else{element['on'+type]=null;//element.onclick==element['onclick'];}}}eventUtil.addHandler(btn3,'click',showmessage);//eventUtil.removeHandler(btn3,'click',showmessage);
事件对象
什么是事件对象? 在触发DOM上的事件时都会产生一个对象
事件对象event
1. DOM中的事件对象
(1). type属性 用于获取事件类型
(2). target属性 用于获取事件目标
(3). stopPropagation()方法 用于阻止事件冒泡
(4). preventDefault()方法 用于阻止事件的默认行为2. IE中的事件对象
(1). type属性 用于获取事件类型
(2). srcElement属性 用于获取事件的目标
(3). cancelBubble属性 用于阻止事件冒泡
设置为true表示阻止事件冒泡设置为false表示不阻止事件冒泡
(4). returnValue属性 用于阻止事件的默认行为
设置为false表示阻止事件的默认行为
事件类型
拖拽->鼠标跟随1、绑定鼠标点击事件2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性)3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)4、将拖拽元素设置成绝对定位5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)6、设置left、top限定,禁止元素拖出窗口7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果注意可以把left、top理解成x轴、y轴键盘事件
keyDown 当用户按下键盘上的[任意键]时触发,而且如果按住不放的话,会重复触发此事件keyPress 当用户按下键盘上的[字符键]时触发,而且如果按住不放的话,会重复触发此事件keyUp 当用户释放键盘上的键时触发
相关文章推荐
- 事件处理
- javascript事件——事件处理程序
- AndroidTV/机顶盒 ListView获取焦点与点击事件问题处理方案
- Java程序设计11——GUI设计与事件处理A
- android的窗口机制分析------事件处理
- C#复合控件获取值,及事件一处理顺顺序
- 简单例子快速了解事件处理和委托 event delegate
- 使用Application_Error事件处理程序把异常记录到系统事件日志
- 基于python的事件处理模型
- HTML5 Canvas 的事件处理---转
- 【JAVA语言程序设计基础篇】--事件驱动程序设计--了解监听器、注册以及处理事件
- android基础知识03——事件处理01:主要事件及其处理方式
- qml事件处理MouseArea
- IOS 开发 事件截断处理
- Android事件处理之处理键盘事件
- 简单事件处理
- JavaScript之事件的处理模型---事件冒泡,捕获及取消冒泡,阻止默认事件
- Mootools 1.2教程 事件处理
- Delphi 7事件的多处理机制
- JavaScript 事件模型 事件处理机制