事件01-事件流、事件处理程序、事件对象_包含各种程序对运行中发生的事件的处理代码-CSDN博客

本文链接：https://blog.csdn.net/silence_xiang/article/details/105795680

JavaScript和HTML之间的交互式通过事件实现的.

事件流

事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="myDiv">点击我</div>
</body>
</html>

如果点击myDiv,则click事件将以下面的顺序进行传播,click事件会按照DOM树向上传播

在这里插入图片描述

事件捕获

若单击上面的myDiv,则会按照下面的顺序触发click事件
document对象先接收到click对象,然后事件按照DOM树依次向下,一直传播到事件的实际目标

在这里插入图片描述

DOM事件流

"DOM2级事件"规定的事件流有事件捕获阶段处于目标阶段和实践冒泡阶段
如上例子触发的事件顺序如下:
在这里插入图片描述

事件处理程序

响应某个实践的函数就叫做事件处理程序(或事件监听器).事件处理程序的名字以"on"开头,click假如是事件的名字.那么事件处理程序就是onclick,load事件的事件处理程序就是onload/

HTML事件处理程序

HTML事件处理程序的缺点是
当用户在页面解析该方法之前就点击了按钮,那么就会引发错误
所以实际开发中并不常用HTML事件处理程序

<input type="button" value="点击我" onclick="showMessage()">
<script>
    //事件处理程序中代码在执行时,有权访问全局作用域中的任何代码
    showMessage = function () {
        alert("点击我!!!");
    }
</script>

DOM0事件处理程序

传统方法是,将一个函数赋值给一个事件处理程序属性.
每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写,如onclick

<button id="btn">按钮1</button>
<script>
//DOM0事件处理程序
    //使用DOM0级方法指定的事件处理程序被认为是元素的方法,程序中的this引用当前元素
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("按钮1点击");
        alert(this.id); // "btn"
    }
    //删除事件处理程序
    btn.onclick = null;
</script>

DOM0级是最广泛使用的方法

DOM2事件处理程序

"DOM2级事件"定义了两个方法,用于处理指定和删除事件处理程序的操作

addEventListener()
removeEventListener()

//DOM2级别事件处理程序
    //参数分别为:要处理的事件名,作为事件处理程序的函数,布尔值
    //参数3:true:在捕获阶段调用处理程序,false:在冒泡阶段调用事件处理程序
    btn.addEventListener("click",function () {
        alert(this.id);
    },false)

 //因为remove方法中不能加一个新函数,故要把移除的函数(事件处理程序)独立出来
    var handler  = function () {
        alert(this.id);
    }
    //监听事件
    btn.addEventListener("click",handler,false);
    //移除事件
    btn.removeEventListener("click",handler,false);

注:
IE浏览器事件处理程序,使用了两个类似的方法

attachEvent()
detachEvent()

事件对象

//event.type属性表示事件类型
    btn.addEventListener("click",function (event) {
        alert(event.type);//"click"
    },false);

所有事件很多成员(略)

常用

属性/方法	说明
currentTarget	其事件处理程序当前正在处理事件的那个元素
eventPhase	调用事件处理程序的阶段:1表示捕获阶段,2表示"处于目标",3表示冒泡阶段
type	被触发的事件的类型

在需要通过一个函数处理多个事件的时候,可以使用type属性

//应用
    var hander  = function (event) {
        switch (event.type) {
            case "click":
                alert("点击");
                break;
            case "mouseover":
                event.target.style.backgroundColor = "pink";
                break;
            case "mouseout":
                event.target.style.backgroundColor = "";
                break;
            default:
                break;
        }
    }
    
    btn.onclick = hander;
    btn.onmouseover = hander;
    btn.onmouseout = hander;

跨浏览器对象

//跨浏览器对象

var EventUtil = {
    addHandler: function (event,type,handler) {
        if (event.addEventListner) {
            event.addEventListner(type,handler,false);
        }else if(event.attachEvent){
            //IE事件处理程序
            event.attachEvent("on",type,handler);
        }else{
            event["on"+type] = handler;
        }
    },

    getEvent:function (event) {
        return event ? event : window.event;
    },

    getTarget:function (event) {
        return event.target || event.srcElement;
    },

    //取消默认行为
    preventDefault:function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },

    removeHandler:function (event) {
        if (event.removeEventListner) {
            event.removeEventListner(type,handler,false);
        }else if(event.detachEvent){
            //IE事件处理程序
            event.detachEvent("on",type,handler);
        }else{
            event["on"+type] = null;
        }
    },

    //阻止事件流
    stopPropagation:function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
}