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()事件监听的几种常用方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！