事件流----描述的是从页面中接受事件的顺序。
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.οnclick==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.οnclick==element['onclick']; } } } eventUtil.addHandler(btn3,'click',showmessage); //eventUtil.removeHandler(btn3,'click',showmessage);
2. IE中的事件对象事件对象
什么是事件对象? 在触发DOM上的事件时都会产生一个对象
事件对象event
1. DOM中的事件对象(1). type属性 用于获取事件类型(2). target属性 用于获取事件目标(3). stopPropagation()方法 用于阻止事件冒泡(4). preventDefault()方法 用于阻止事件的默认行为(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.clientWidth 8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴keyDown 当用户按下键盘上的[任意键]时触发,而且如果按住不放的话,会重复触发此事件 keyPress 当用户按下键盘上的[字符键]时触发,而且如果按住不放的话,会重复触发此事件 keyUp 当用户释放键盘上的键时触发