DOM事件

最新推荐文章于 2022-08-24 20:27:32 发布

你的晚晚

最新推荐文章于 2022-08-24 20:27:32 发布

阅读量92

点赞数

分类专栏： js知识点文章标签： js学习

本文链接：https://blog.csdn.net/weixin_42869547/article/details/83302258

版权

js知识点专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、事件流

描述的是从页面中接受事件的顺序

事件冒泡
即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
事件捕获
不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

二、使用事件处理程序

HTML事件处理程序
DOM0级事件处理程序
比较老的浏览器，较传统的方式：把一个函数赋值给一个事件的处理程序属性
DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作

addEventListener()
removeEventListener()

接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值

参数说明：

要处理的事件名必须去掉on。例如

btn.addEventListener('click',showMes,false);//DOM2级事件
btn.removeEventListener('click',showMes,false);//删除事件

布尔值为false：事件冒泡；布尔值为true：事件捕获

IE事件处理程序

attachEvent()添加事件
detachEvent()删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

参数说明：

不支持第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡
事件处理程序的名称必须加on，例如：

btn.attachEvent()('onclick',showMes);
btn.detachEvent()('onclick',showMes);//删除事件

跨浏览器的事件处理程序

<body>
    <div id="box">
        <input type="button" id="btn" value="按钮">
        <input type="button" id="btn2" value="按钮2">
        <input type="button" id="btn3" value="按钮3">
        <input type="button" id="btn4" value="按钮4">

    </div>

    <script>
        function showMes(e){
            alert('hello world');
        }

        var btn=document.getElementById('btn');
        var btn2=document.getElementById('btn2');
        var btn3=document.getElementById('btn3');
        var btn4=document.getElementById('btn4');

        //DOM0级
        btn.onclick=function(){
            alert('这是通过DOM0级添加的事件!');
        }
        // btn.onclick=null;//删除事件

        //DOM2级事件
        btn2.addEventListener('click',showMes,false);
        btn2.addEventListener('click',function(){
            alert(this.value);
        },false);
        // btn2.removeEventListener('click',showMes,false);//删除事件

        //IE事件处理程序（IE 和opera）
        // btn3.attachEvent('onclick',showMes);
        // btn3.detachEvent('onclick',showMes);//删除事件

        //跨浏览器事件处理程序 ，封装在对象内
        var eventUtil={
            //添加句柄
            addHandler:function(element,type,handler){//(元素，事件类型，函数)(这里的事件类型不能加on)
                if(eventUtil.addEventListener){
                    element.addEventListener(type,handler,false);
                }else if(eventUtil.attachEvent){
                    element.attachEvent('on'+type,handler);
                }else{
                    element['on'+type]=handler;
                }
            },
            //删除句柄
            /*removeHandler:function(element,type,handler){
                if(eventUtil.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(eventUtil.detachEvent){
                    element.detachEvent('on'+type,handler);
                }else{
                    element['on'+type]=null;
                }
            }*/
        }

        eventUtil.addHandler(btn4,'click',showMes);
        // eventUtil.addHandler(box,'click',showBox);
    </script>
</body>

三、事件对象

在触发DOM上的事件时都会产生一个对象

事件对象event

DOM中的事件对象

type属性用于获取事件属性
target属性用于获取事件目标
keyCode属性用于得到键盘对应键的键码值
clientX/clientY属性表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包括页面滚动的距离）所有浏览器支持
stopPropagation()方法用于阻止事件冒泡
preventDefault()方法阻止事件的默认行为

IE中的事件对象

type属性用于获取事件属性
srcElement属性用于获取事件目标
cancelBubble属性用于阻止事件冒泡
设置为true表示阻止事件冒泡 false为不阻止事件冒泡
returnValue=false属性阻止事件的默认行为

举例：

<body>
    <div id="box">
        <a href="https://www.imooc.com" id="goto">跳转</a>
    </div>
</body>

<script>
var box=document.getElementById('box');
var goto=document.getElementById('goto');

var eventUtil={
            getEvent:function(event){
                return event?event:window.event;

            },//IE8-用window.event

            getType:function(event){
                return event.type;
            },//获取事件类型

            getElement:function(event){
                return 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;
                }
            }//阻止事件冒泡
        }

		eventUtil.addHandler(box,'click',function(){
            alert('这是按钮的父元素');
        });

        eventUtil.addHandler(goto,'click',function(e){
            // e=e || window.e;
            e=eventUtil.getEvent(e);//获取事件对象event
            alert(eventUtil.getType(e));//获取事件类型
            alert(eventUtil.getElement(e));//获取事件目标
            eventUtil.preventDefault(e);
            eventUtil.stopPropagation(e);
        });
</script>

四、键盘事件

1. onkeydown

当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件

2.onkeypress

当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件

3. onkeyup
当用户释放键盘上的键时触发

你的晚晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件

一、事件流描述的是从页面中接受事件的顺序事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）事件捕获不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件二、使用事件处理程序HTML事件处理程序DOM0级事件处理程序比较老的浏览器，较传统的方式：把一个函数赋值给一个事件的处理程序属性DOM2级事件...
复制链接

扫一扫