javascript事件

发表于   |  

javascript事件机制

事件流

  1. 事件：我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
  2. 事件触发的三个阶段：
    • 事件捕捉
    • 到达事件位置，触发事件（如果这里既有捕捉事件，也有冒泡事件，则按注册的顺序执行）
    • 事件冒泡，并触发。
  1. 事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
    • 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；
    • ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;

事件处理程序

事件的绑定主要为IE8以下浏览器做兼容处理：

IE8以下只支持事件冒泡
IE事件处理使用attachEvent detachEvent

事件绑定

主要方法：addEventListener ， attachEvent(IE) ， [on + type]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
EU.addHandler = function(element,type,handler){
    //DOM2级事件处理，IE9也支持
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加'on'
        //IE9也可以这样绑定
        element.attachEvent('on' + type,handler);
    }
    //DOM0级事件处理步，事件流也是冒泡
    else{
        element['on' + type] = handler;
    }
};
  • element.addEventListener(event, function, useCapture)
  • useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
    • true - 事件句柄在捕获阶段执行
    • false- false- 默认。事件句柄在冒泡阶段执行

取消绑定事件

注意，取消的事件函数应该和绑定函数相同
主要方法：removeEventListener ， detachEvent(IE) ，[on + type] = null 

1
2
3
4
5
6
7
8
9
10
11
12
EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent('on' + type,handler);
    }
    else{
        //属性置空就可以
        element['on' + type] = null;
    }
};

事件对象

IE下event是全局对象，通过window.event取得

1
2
3
EU.getEvent = function(event){
    return event || window.event;
}

事件对象属性

image
image

事件的目标

IE下通过attachEvent绑定事件，内部this并非触发事件的DOM,而是window;
通过目标对象来获取DOM节点，IE下是srcElement属性，等同于其他浏览器的target属性
主要属性：event.target ， event.srcElement(IE) 

1
2
3
EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻止默认事件

主要方法：event.preventDefault , event.returnValue = false;

1
2
3
4
5
6
7
8
9
EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下处理
    else{
        event.returnValue = false; //默认为true
    }
}

阻止事件冒泡

主要方法：event.stopPropagation , event.cancelBubble = true

1
2
3
4
5
6
7
8
9
EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下处理
    else{
        event.cancelBubble = true;//默认为false，注意区分于returnValue
    }
}

事件类型

事件类型有 鼠标事件，键盘事件，移动端的事件，自定义事件。。。。
不做详细介绍。需要了解可以查看mdn 或 w3cschool 相关资料。

事件代理和事件委托

*区别 

* 事件委托：事件就是onclick，onmouseover，onmouseout，等，利用冒泡的原理，把事件加到父级上，触发执行效果
* 事件代理：如果我们不想或不能够直接操纵目标对象，我们可以利用delegate创建一个代理对象来调用目标对象的方法，从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理(也就是说不会直接去操纵对象)

事件委托

原理是事件冒泡，将事件加在父元素，触发执行

1
2
3
4
5
6
7
8
9
10
function delegate(element, targetSelector, type, handler) {
    var targets = Array.prototype.slice
                    .call(element.querySelectorAll(targetSelector));
    element.addEventListener(type, function(event) {
        var target = event.target;
        if (targets.indexOf(target) != -1) {
            return handler.apply(target, arguments);
        }
    }, false);
}