javascript中的事件

所谓事件，就是HTML文档或浏览器窗口发生的一些特定的交互瞬间(比如用户点击了一个html元素)，事件可以使用侦听器或者事件处理程序来预定事件。

事件流：描述了页面接收事件的顺序

　　1 事件冒泡流，由最具体的元素逐级向上传播，直至文档。

　　例如：如果我们点击了网页中的一个<li>标签，我们可以认为我们不仅点击了<li>标签，还点击了包含这个<li>标签的<ul>，还点击了包含<ul>的<body>…… 这也就意味着：若<li>和<ul>都有事件处理程序时，点击<li>会触发<li>和<ul>上的事件处理程序。多数情况下，事件冒泡较为常用。

　　2 事件捕获流，由不具体的元素逐级向下传播，直至最具体的元素。与事件冒泡完全相反

事件处理程序

1 html事件处理程序

<li onclick="alert('hello world!')"></li>

　　在html标签上添加事件　　

2 DOM0级事件处理程序

　　在javascript脚本中为元素对象的时间属性添加事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <ul>
        <li id="first"></li>
        <li></li>
    </ul>
</body>
<script>
    var a = document.getElementById('first');
    a.onclick = function(){
        alert('hello world')
    }
</script>
</html>

View Code

3 DOM2级事件处理程序 (IE8及以上版本不支持)

　　使用事件处理程序方法添加事件，有两个方法;

　　　　addEventListener() 和 removeEventListener() 接收三个参数: 事件名事件处理函数布尔值(决定使用哪种事件流)

　　　　　　事件名： 'click' 'mouseover' …… 注意：没有 on ！！

　　　　　　事件处理函数: 函数名或者自定义匿名函数

　　　　　　布尔值： false表示使用事件冒泡 true表示使用事件捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <ul>
        <li id="first"></li>
        <li></li>
    </ul>
</body>
<script>
    var a = document.getElementById('first');
    a.addEventListener('click',function(){alert('hello world!')},false)
    
</script>
</html>

View Code

4 IE特有的事件处理程序方法

　　attachEvent() detachEvent() 分别表示添加事件或者删除事件。两个参数：事件名事件处理函数

　　　　事件名：'onclick' 'onmouseover'…… 注意：有 on ！！

　　　　事件处理函数：函数名或者自定义匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <ul>
        <li id="first"></li>
        <li></li>
    </ul>
</body>
<script>
    var a = document.getElementById('first');
    a.attachEvent('onclick',function(){alert('hello world!')})

</script>
</html>

View Code

5 跨浏览器的事件处理程序

　　合理使用能力检测

var EventUtil = {
        addLister:function(element,type,hander){
            if (element.addEventListener){
                element.addEventListener(type,hander,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,hander);
            }else{
                element['on'+type] = hander;
            }
        },
        removeEvent:function(element,type,hander){
            if(element.removeEventListener){
                element.removeEventListener(type,hander,false)
            }else if(element.detachEvent){
                element.detachEvent('on'+type,hander)
            }else{
                element['on'+type] = hander
            }
        }
    }

View Code

事件对象

　　在触发DOM中的事件时，会产生一个事件对象event，这个对象包含了与事件有关的信息。如：鼠标事件对象包含鼠标的位置，键盘导致的事件对象包含键盘的按键。

1 DOM中的事件对象

　　无论使用DOM0级还是DOM2级事件处理程序，都会产生一个事件对象并传入该事件处理程序中。

 var a = document.getElementById('first');
    a.onclick = function(event){
        alert(event.clientX)  // 显示鼠标点击时的x坐标
}

　　event.type 返回时间名称如 'click'

　　event.stopPropagation() 阻止事件冒泡

　　event.preventDefault() 阻止事件的默认行为

2 IE中的事件对象

    var a = document.getElementById('first');
    a.onclick = function(){
        var event = window.event
        alert(event.type);  // 显示鼠标点击时的x坐标

    }

　　type 事件名

　　srcElement 事件目标

　　cancelBubble 阻止事件冒泡，true为阻止

　　returnValue 阻止事件默认行为

3 跨浏览器兼容

var EventUtil = {
        addLister:function(element,type,hander){
            if (element.addEventListener){
                element.addEventListener(type,hander,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,hander);
            }else{
                element['on'+type] = hander;
            }
        },
        removeEvent:function(element,type,hander){
            if(element.removeEventListener){
                element.removeEventListener(type,hander,false)
            }else if(element.detachEvent){
                element.detachEvent('on'+type,hander)
            }else{
                element['on'+type] = hander
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target?event.target:event.srcElement;
        },
        preventDefault:function(event){
            if (event.preventDefault){
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){
            if (event.stopPropagation){
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
        }
    }

View Code