WEB API----事件（event）

　　当用户与Web页面进行某些交互时，解释器就会创建相应的event对象以描述事件信息。常见的事件有：用户点击页面上某项内容；鼠标经过特定的元素...

　　Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态，鼠标的位置，鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

function getEvent(ev) {
            var e = ev || window.event;
}

　　事件句柄（又称事件处理函数，事件监听函数），指用于响应某个事件而调用的函数。

　　鼠标事件：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout...

　　键盘事件：onkeydown,onkeyup,onkeypress...

　　状态事件: onload,onunload,onchange,onfocus,onblur,onresize,onsubmit,onreset,onerror...

　　事件定义

　　1.直接在HTML中定义事件相关属性

<button onclick="alert(123)">按钮</button>
<body onload="init()">...</body>

　　2.在JS中为元素添加　

oBtn.onclick=function(){...};

document.body.onload=init;
function init(){...}

　　3.高级事件处理函数,一个事件可以绑定多个监听函数

box.addEventListener('click', eventCode, false);//DOM

box.attachEvent('onclick', eventCode);//IE

　　事件移除

box.removeEventListener('click',eventCode,false);//DOM

box.detachEvent('onclick',eventCode);

　　解释器创建一个event对象后，在HTML元素间传播会有如下阶段：

　　事件源对象：event.srcElement||event.target

　　事件所处的传播阶段：event.eventPhase
　　事件类型:event.type

　　窗口位置:clientX/clientY

　　页面位置(IE8以前不支持):pageX/pageY　

　　偏移量：offset　　

　　　　　　offsetParent,offsetTop,offsetLeft,offsetWidth（带边框的宽度）,offsetHeight（带边框的高度）

　　可视区：client

　　　　　　clientLeft（左边框的宽度）,clientTop（上边框的宽度）,clientWidth（不带边框的宽度（可视区的宽））,clientHeight（不带边框的高度（可视区的高））

　　滚动偏移:scroll

　　　　　　scrollLeft,scrollTop,scrollWidth,scrollHeight

　　键盘事件中按下的按钮：

　　　　　　which、keyCode、charCode

　　鼠标按键：button

　　阻止事件传播方式：event.stopPropagation(); //谷歌和火狐支持,

　　　　　　　　　　　window.event.cancelBubble=true；//IE特有的,谷歌支持,火狐不支持

　　取消默认行为:event.preventDefault();

　　　　　　　　 event.returnValue = false

来源：oschina

链接：https://my.oschina.net/u/4406043/blog/3895404

标签