javascript 事件模型 及 event对象属性总结

    W3c 事件模型也就是标准事件模型，执行顺序分为3个阶段，捕获阶段，目标阶段，冒泡阶段。
        捕获阶段：指由document节点向子节点逐级传播，只要某个子节点注册了相同类型的事件，就会执行绑定的事件函数，直到目标节点停止；
        目标阶段：执行目标节点上绑定的事件处理函数；
        冒泡阶段：跟捕获阶段相反，会由目标节点向父节点逐级冒泡，只要某个父节点注册了相同类型的事件，就会执行绑定的事件函数，直到document节点停止；

    IE下没有 捕获阶段；

   W3C注册事件的方法是 addEventListener ，它需要传入三个参数 eventType（事件类型 string）、handler（事件函数 function）、useCapture（是否捕获 boolean）。前两个常用都明白，只介绍下第三个参数，useCapture值为true时，事件处理函数会在捕获模式下触发执行；设为false时，事件处理函数会在冒泡模式下触发执行；所以为了跟IE统一，一般都是设为false，使用冒泡模式触发；

　对此我们以实例求证：

<div id="div1">
    1
    <div id="div2">
        2
        <div id="div3">
            3
        </div>
    </div>
</div>

var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
var d3 = document.getElementById("div3");
document.addEventListener("click",function(){alert(this.nodeName)},true);
document.addEventListener("click",function(){alert(this.nodeName)},false);
d1.addEventListener("click",function(){alert(this.id)},true);
d1.addEventListener("click",function(){alert(this.id)},false);
d2.addEventListener("click",function(){alert(this.id)},true);
d2.addEventListener("click",function(){alert(this.id)},false);
d3.addEventListener("click",function(){alert(this.id)},true);
d3.addEventListener("click",function(){alert(this.id)},false);

   点击div3，他的弹出信息依次是：#document，div1，div2，div3，div3，div2，div1，#document。

   IE注册事件的方法是 attachEvent，需要传入两个参数，eventType（事件类型 string，注：需要前面+"on"），handler（事件函数 function）；

　为了兼容所有浏览器方便使用，我们一般都会对其进行封装，示例：

var Events=(function(){
    var addListener,removeListener,fire;
    if(typeof window.addEventListener === "function"){
        addListener=function(el,type,handler){
            el.addEventListener(type,handler,false);    
        };
        removeListener=function(el,type,handler){
            el.removeEventListener(type,handler,false);
        };
        fire=function(el,type){
            el[type]();
        };
    }else if(typeof document.attachEvent === "function"){
        addListener=function(el,type,handler){
            el.attachEvent("on"+type,handler);    
        };
        removeListener=function(el,type,handler){
            el.detachEvent("on"+type,handler);
        };    
        fire=function(el,type){
            el[type]();
        };
    }else{
        addListener=function(el,type,handler){
            el["on"+type]=handler;
        };
        removeListener=function(el,type,handler){
            el["on"+type]=null;
        };
        fire=function(el,type){
            el[type]();
        };
    }
    return {
        addListener:addListener,
        removeListener:removeListener,
        fire:fire
    }
 })();
//调用：
 Events.addListener(document,"click",function(event){
    event = event||window.event;
    alert(typeof event.srcElement);
 });
 Events.fire(document.getElementById("js_name"),"click");

 删除事件 W3C用 removeEventListener(eventType,handler,useCapture)；IE用detachEvent(eventType,handler);不再举例；

 event 对象：

获取对象一般用var event = window.event | evt;//evt传进来的evt;

IE事件属性	W3C事件属性	介绍
altKey	altKey	设置或获取 Alt 键的状态，当前状态的值 true (按下) 或 false (没按下)
ctrlKey	ctrlKey	设置或获取 Ctrl 键的状态，当前状态的值 true (按下) 或 false (没按下)
shiftKey	shiftKey	设置或获取 Shift 键的状态，当前状态的值 true (按下) 或 false (没按下)
clientX	clientX	设置或获取鼠标指针相对于用户浏览器客户区域左边缘 X 轴距离 （不包括浏览器操作控件和滚动条）
clientY	clientY	设置或获取鼠标指针相对于用户浏览器客户区域上边缘 Y 轴距离（不包括浏览器操作控件和滚动条）
screenX	screenX	设置或获取鼠标指针相对于屏幕左边缘在 X 轴上距离
screenY	screenY	设置或获取鼠标指针相对于屏幕上边缘在 Y 轴上距离
offsetX	layerX	设置或获取鼠标指针相对于触发对象在 X 轴上偏移量
offsetY	layerY	设置或获取鼠标指针相对于触发对象在 Y 轴上偏移量
x	pageX	设置或获取鼠标指针相对于一个相对定位父元素的左边缘 X 轴上的距离
y	pageY	设置或获取鼠标指针相对于一个相对定位父元素的上边缘 Y 轴上的距离
cancelBubble	stopPropagation()	设置或获取当前事件是否要在事件处理函数中向上冒泡，true (允许) false(不允许)
returnValue	preventDefault()	设置或获取事件的返回值，true (事件中的值被返回) false(源对象上的默认操作被取消)
fromElement	relatedTarget	设置或获取事件发生时激活的对象或鼠标将要离开的对象
srcElement	target	设置或获取出发事件的对象，也就是发生事件的文档元素
keyCode	keyCode	设置或获取与触发事件的按键相关联的按键代码(Unicode)，改属性与keydown,keypress,keyup配合使用，默认则为0，String.fromCharCode(event.keyCode)转换编码为字符串
type	type	从event中获取事件名称，如:click,mouseover..

转载于:https://www.cnblogs.com/bjmumu/p/3191301.html