JavaScript事件

事件处理

1. HTML事件处理：直接添加到HTML结构中

2. DOM0级事件处理 把一个函数赋值给一个时间处理程序属性

3. DOM2级时间处理 

       addEventListener("事件名"，“事件处理函数”，“布尔值”)；

       true：事件捕获  false：事件冒泡  removeEventListener（）

4. IE事件处理程序

      attachEvent  detachEvent

事件对象

1、事件对象：在触发DOM事件的时候都会产生一个对象

2、事件对象event

       type：获取时间类型

        target：获取事件目标

        stopPropagation()：阻止事件冒泡

        preventDefault()：阻止事件默认行为

<script>
    function demo(){
        alert("你好，我是事件处理")
    }
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){ alert("你好，我是0级事件处理器")}

    var btn2 = document.getElementById("btn2");
    btn2.addEventListener("click",demo1);
    btn2.addEventListener("click",demo2);
    btn2.addEventListener("mouseout",demo3);

    function demo1(){
        alert("你好，我是2级程序处理的第一个");
    }
    function demo2(){
        alert("你好，我是2级程序的第二个");
    }
    function demo3(){
        alert("你好，我是2级程序处理的第三个")
    }
    btn2.removeEventListener("click",demo2);

    var btn3 = document.getElementById("btn3");
    if(btn3.addEventListener){
        btn3.addEventListener("click",demo4);
    }else if(btn3.attachEvent){
        btn3.attachEvent("onclick",demo4);//不同addEventListener click需要加on
    }
    else{
        btn3.onclick = demo4();  //两个时间都不支持，直接执行
    }
    function demo4(){
        alert("判断addEventListener或attachEvent");
    }

    document.getElementById("btn4").addEventListener("click",showType);
    document.getElementById("showDiv").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);

    function showType(e){
        alert(e.type);
        alert(e.target);
        e.stopPropagation();
    }
    function showDiv(){
        alert("Div");
    }
    function showA(e){
        e.stopPropagation();
        e.preventDefault();
    }
</script>