Javascrtpt addEventListener()事件监听的几种常用方法

本文主要是介绍Javascrtpt addEventListener()事件监听的几种常用方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

    <h1>事件流</h1>
    <div class="father">
        <div class="son">son</div>
    </div>

    <h1>监听事件</h1>
    <div class="div">123</div>
    <ul class="ul">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>

    <h1>方法和属性</h1>
    <div class="div2"></div>
    <a href="www.4399.com">4399</a>
    <div class="div3"></div>

    <ul class="ul2">
        <li>知否知否，应该有带带手</li>
        <li>知否知否，应该有带带手</li>
        <li>知否知否，应该有带带手</li>
        <li>知否知否，应该有带带手</li>
        <li>知否知否，应该有带带手</li>
    </ul>

    <img src="img/i-con-title.png" alt="">
    
    <div class="div5"></div>
    <input class="text" type="text" placeholder="请输入你的号码" name="" id="">

body{
            height: 3000px;
        }
        .father{
            width: 100px;
            height: 100px;
            background-color: powderblue;
            
        }
        .son{
                width: 50px;
                height: 50px;
                background-color: pink;
        }

        .div,.div2,.div3{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            background-color: powderblue;
        }
        a{
            background-color: powderblue;
        }
        img{
            position: absolute;
        }
        .div5{
            display: none;
            position: relative;
            width: 171px;
            height: 20px;
            border: 1px solid rgba(0,0,0,.2);
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
            padding: 5px 0;
            font-size: 20px;
            color: #333;
            margin-bottom: 10px;
        }
        .div5::before{
            content: '';
            width: 0;height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent
        }

1、e.target 返回的是触发事件的对象(元素)

div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);
        })

e.target 和 this 的区别

e.target 点击那个元素就返回那个元素;

this 那个元素绑定了这个事件就返回那个元素

var ul=document.querySelector('.ul');
        ul.addEventListener('click',function(e){
            //this 我们给ul绑定事件 this 就指向ul
            //e.target  指向我们点击的那个对象 谁触发了这个事件 我们点击的li e.target 
            console.log(this);
            console.log(e.target);
            e.target.style.background="red";
        })

this指向返回的是绑定事件的元素ul，e.target 返回的是鼠标点击触发事件的li标签

2、e.tyoe 返回触发事件的名称

var div2=document.querySelector('.div2');
        div2.addEventListener('mouseover',fn);
        div2.addEventListener('click',fn);

        function fn(e){
            console.log(e.type);//返回事件的名称
        }

返回被触发事件的名称

3、e.preventDefault() 阻止默认行为(事件)

让连接不调整或者让提交按钮不提交

var a=document.querySelector('a');
        //阻止a连接默认的跳转事件
        a.addEventListener('click',function(e){
            e.preventDefault() //dom 标准写法
        })

//传统的注册方式
        a.onclick= function(e){
            // 普通浏览器 e.preventDefault();
            // e.preventDefault();
            // 低版本浏览器 ie678 returnValue
            // e.returnValue;

            // 利用return false 也能阻止默认行为 没有兼容性问题 特点：return 后面的代码不执行了 而且只限于传统的注册行为
            return false;
        }

4、e.stopPropagation 阻止事件冒泡

var div3=document.querySelector('.div3');
        div3.addEventListener('click',function(e){
            alert('div');
            //兼容性写法 阻止冒泡
            if(e && e.stopPropagation){
                e.stopPropagation();//停止冒泡
            }else{
                e.cancelBubble = true; //阻止冒泡使用 ie678
            }
        })
        //e.cancelBubble 阻止冒泡使用 ie678
        // document.addEventListener('click',function(){
        //     alert('document');
        // },false);

5、事件委托

事件委托的原理：不是给每一个子节点单独设置事件监听器，而是事件监听器设置在其父节点上然后利用冒泡原理影响设置每个子节点

ul2.addEventListener('click',function(e){
            // alert('知否知否，应该有带带手');
            // e.target 拿到我们点击的对象
            for (let i = 0; i < ul2.children.length; i++) {
                ul2.children[i].style.background='#fff';
            }//变白
            e.target.style.background='red';
        })

5、鼠标事件

//1.禁止鼠标右键菜单 contextmenu 右键菜单
        // document.addEventListener('contextmenu',function(e){
        //     e.preventDefault();//阻止事件
        // })

        //2.禁止鼠标选中(selectstart 开始选中)
        // document.addEventListener('selectstart',function(e){
        //     e.preventDefault();
        // })

//鼠标事件对象 MouseEvent
        document.addEventListener('click',function(e){
            //e.clientX 返回鼠标相对于浏览器X坐标   可视区窗口
            //e.clientY 返回鼠标相对于浏览器Y坐标   可视区窗口
            // console.log(e.clientX);//返回鼠标可视区窗口x的坐标
            // console.log(e.clientY);//返回鼠标可视区窗口y的坐标

            //e.pageX 返回鼠标相对于文档页面X坐标 ie9+支持
            //e.pageY 返回鼠标相对于文档页面Y坐标 ie9+支持
            // console.log(e.pageX);//返回整个浏览器的x坐标
            // console.log(e.pageY);//返回整个浏览器的y坐标

            //e.screenX 返回鼠标相当于电脑屏幕的X坐标
            //e.screenY 返回鼠标相当于电脑屏幕的Y坐标
            // console.log(e.screenX);
            // console.log(e.screenY);

            null;
        })

6、键盘事件

//1.onkeyup 某个键盘按键松开时被触发
        // document.onkeyup=function(){
        //     console.log('我弹起来了');
        // }

        document.addEventListener('keyup',function(){
            console.log('我弹起来了');
        })

        //2.onkeydown 某个键盘按下时触发
        // document.onkeydown=function(){
        //     console.log('我按下了keydown');
        // }

        document.addEventListener('keydown',function(){
            console.log('我按下了keydown');
        })
        
        //3.onkeypress 某个键盘按下时触发  但是不能识别功能键 比如 ctrl shift 箭头等  
        // document.onkeypress=function(){
        //     console.log('我按下了keypress');
        // }

        document.addEventListener('keypress',function(){
            console.log('我按下了keypress');
        })
        //不识别 shift ctrl 等功能键

        //4.三个事件的执行顺序 onkeydown -》 onkeypress -》 onkeyup


        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup',function(e){
            console.log('up'+e.keyCode);//得到相应键的ASCII值
            //1.我们keyup 和keydown 事件不区分英文大小写 a和A 都是65
            //2.我们keypress 事件 区分 英文字母大小写
            if(e.keyCode===65){
                alert('您按下了a');
            }
            if(e.key==='q'){//key 低版本不兼容 获取按下的按键
                alert('您按下了q');
            } 
        })

        document.addEventListener('keypress',function(e){
            console.log('press'+e.keyCode);//得到相应键的ASCII值
            //1.我们keyup 和keydown 事件不区分英文大小写 a和A 都是65
            //2.我们keypress 事件 区分 英文字母大小写 a 97 和 A 65
        })

        //案例
        var div5=document.querySelector('.div5');
        var tt=document.querySelector('.text');
        tt.addEventListener('keyup',function(e){
            if(this.value==''){
                div5.style.display='none';
            }else{
                div5.innerHTML=this.value;
                div5.style.display='block';
            }
        })

        //当失去焦点
        tt.addEventListener('blur',function(e){
            div5.style.display='none';
        })
        //当获得焦点
        tt.addEventListener('focus',function(e){
            if(tt.value!=''){
                div5.style.display='block';
            }
        })

这篇关于Javascrtpt addEventListener()事件监听的几种常用方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

Javascrtpt addEventListener()事件监听的几种常用方法

1、e.target 返回的是触发事件的对象(元素)

2、e.tyoe 返回触发事件的名称

3、e.preventDefault() 阻止默认行为(事件)

4、e.stopPropagation 阻止事件冒泡

5、事件委托

5、鼠标事件

6、键盘事件

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯