事件流，事件对象

最新推荐文章于 2024-09-22 11:17:00 发布

jennifer19911103

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量410

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/dudu_aa/article/details/52343831

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件流

描述页面中接收事件的一个顺序（事件冒泡流，事件捕获流）

html 事件处理程序（事件直接加在html里， js代码和html代码耦合）

DOM 0级事件处理程序（最多用，把一个函数赋值给一个事件处理程序的属性）可以给一个元素添加多个事件

DOM 2级事件处理程序（addEventListener,removeEventListener接受三个参数：要处理的事件名、作为事件处理程序的函数和布尔值）—主要用于chrome，非IE，可以给一个元素添加多个事件

IE事件处理程序：attachEvent（） detachEvent()参数为事件处理程序的名称和事件处理程序的函数

跨浏览器的事件处理程序封装好的代码可以直接调用event.js

事件对象event：在触发DOM上的事件时都会产生一个对象，事件对象event包含所有与事件相关的东西

事件对象event
一、DOM中的事件对象

1 type属性 event.type获取事件类型
2 target属性 event.target.nodeName获取事件目标,事件是来自哪个元素
3 stopPropagation（）阻止事件冒泡
4 preventDefault() 阻止事件的默认行为

二、IE中的事件对象

1 type属性，同上
2 srcElement属性 event.srcElemnt
3 cancelBubble属性当为true时取消冒泡
4 returnValue属性当为false时阻止事件的默认行为

//跨浏览器事件处理程序
<span style="font-size:18px;">var  eventUtil={
        //添加句柄
        addHandler:function(element,type,handler){
            if (element.addEventListener) {
                //DOM 2级，非IE
                element.addEventListener(type,handler,false);
            } else if(element.attachEvent){
                //IE
                element.attachEvent('on'+type,handler);
            }else{
                //DOM 0级，会被最后一个效果覆盖
                element['on'+type]=handler;
            }
        },
        //删除句柄
        removeHandler:function(element,type,handler){
            if (element.removeEventListener) {
                //DOM 2级
                element.removeEventListener(type,handler,false);
            } else if(element.detachEvent){
                //IE
                element.detachEvent('on'+type,handler);
            }else{
                //DOM 0级
                element['on'+type]=null;
            }
        },
        //获取事件
        getEvent:function(event){
            return event?event:window.event;
        },
        //获取事件类型
        getType:function(event){
            return event.type;
        },
        //获取事件来源
        getElement:function(event){
            return event.srcElement||event.target;
        },
        //阻止事件默认行为
        preventDefault:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue=false;
            }
        },
        //阻止事件冒泡
        stopPropagation:function(event){
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble=true;
            }
        }
     };</span>