Javascript知识总结（12）-事件监听

最新推荐文章于 2023-10-13 09:26:42 发布

Harry-iu

最新推荐文章于 2023-10-13 09:26:42 发布

阅读量470

点赞数 3

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/www1577791638/article/details/113829407

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

JavaScript

来源博客：【Harryの心阁】

注册事件

传统注册方式，使用on开头的，注册事件具有唯一性
方法监听方式 addEvebtListener() / attachEvebt(),特点：同一个元素可以添加多种事件

事件监听方式

addEvetListener('事件类型',function(){})，
里面的事件是字符型，不加on
同一个元素同一个事件可以添加多个侦听器（事件处理程序）

兼容性问题

attachEvent(‘事件类型’,function(){})
ie9以前支持

删除事件

传统事件解绑方法

    <script>
        var divs =document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert('nihao');
            divs[0].onclick = null;
        }
    </script>

第二种removeEventListener

        divs[1].addEventListener('click',fn);
        function fn(){
            alert('nihao');
            divs[1].removeEventListener('click',fn)
        }

第三种使用datch

Dom事件流

捕获阶段，当前目标阶段，冒泡阶段
js代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener看第三个参数的设置默认为false，true表示在事件捕获阶段调用事件处理程序，false表示在事件冒泡阶段调用事件处理程序
传播类型：捕获从外到里，冒泡从里到外
有些事件没有冒泡onblur，onmouseenter，onmouseleave，onfocus

事件对象

侦听函数小括号里面的当形参来看
有兼容性问题，ie678通过window.event

        var divs =document.querySelectorAll('div');
        divs[0].onclick = function(e){
            console.log(e);
            e = e || Window.event;
        }
        
        divs[1].addEventListener('click',fn);
        function fn(e){
            console.log(e);
            e = e || Window.event;
        }

常见事件对象的属性和方法

返回事件

e.target 返回的是触发事件的对象元素 event,兼容性问题e.srcElement
this返回的是绑定事件的对象 (类似属性currentTarget,有兼容性问题问题)
e.type调用事件类型，不带on

阻止默认事件

e.preventDefault() 有兼容性问题
低版本使用returnValue
可以使用return false，没有兼容性问题，特点 return后面的代码不执行，只限制于传统的注册方式

阻止冒泡

stopPropagation()，偶遇兼容性问题
e.canceBubble = true 非标准的

事件委托

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

常见的鼠标事件

contextmenu文本菜单
selectstart选中文字

    <ul>我是一段不愿意被复制的文字</ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        ul.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>

鼠标事件对象

click

e.clientX/Y 鼠标在可视区
e.pageX/Y 在页面文档
e.screnX/Y 相对于屏幕

mousemove

原理：获取鼠标的位置，设置元素的样式

    <style>
        img{
            position: absolute;
            width: 20px;
        }
    </style>
    <img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/0/jsdelivr.jpeg" alt="">
    <script>
        var imgc = document.querySelector('img')
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            imgc.style.left = x +'px';
            imgc.style.top = y +'px';
        })
    </script>

常用的键盘事件

keyup按键弹起时触发
keydown按下时触发，能识别功能键，优先级高
keypress被按下时触发（不识别功能键ctrl，shift，左右箭头）
e.keyCode 得到相应键位的ASCII值，keyup和keydown事件不区分字母大小写，keypress区分大小写

    <input type="text">
    <script>
        var input = document.querySelector('input');
        document.addEventListener('keyup',function(e){
            console.log(e.keyCode);
            if(e.keyCode === 65){
                input.focus();
            }
        })
    </script>

<style>
    .box {
        position: relative;
        width: 150px;
        margin: 6.25rem auto;
    }

    .con {
        display: none;
        position: absolute;
        top: -25px;
        margin: 0 0 5px 20px;
        border-radius: 10px;
        height: 20px;
        width: 80px;
        background-color: #537934;
        color: #000;
        font-size: 10px;
        padding-left: 5px;
        padding-top: 2px;
    }

    .con:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-top: 5px solid #537934;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        margin: 10px auto;
        bottom: -15px;
        left: 20px;
    }

    input {
        outline: none;
        border-radius: 5px;
        width: 150px;
        height: 20px;
        padding-left: 4px;
        border: 2px solid #ccc;
        background-color: rgba(139, 187, 50, 0.424);
    }
</style>

<body>
    <div class="box">
        <div class="con"></div>
        <input type="text" name="" id="" placeholder="请输入内容">
    </div>
    <script>
        // 获取光标
        var inputs = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            if (e.keyCode === 65) {
                inputs.focus();
            }
        })
        // 第二步实现浮动框显示，在检测到con中出现文字时
        var box = document.querySelector('.box');
        inputs.addEventListener('keyup', function () {
            if (inputs.value == '') {
                box.children[0].style.display = 'none';
            } else {
                box.children[0].style.display = 'block';
                box.children[0].innerHTML = inputs.value;
            }

        })
        inputs.addEventListener('focus', function () {
            if (inputs.value !== '') {
                box.children[0].style.display = 'block';
            }
        })
        inputs.addEventListener('blur', function () {
            box.children[0].style.display = 'none'
        })

    </script>

Harry-iu

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
Javascript知识总结（12）-事件监听

JavaScript注册事件事件监听方式删除事件Dom事件流事件对象常见事件对象的属性和方法事件委托常见的鼠标事件鼠标事件对象常用的键盘事件来源博客：【Harryの心阁】注册事件传统注册方式，使用on开头的，注册事件具有唯一性方法监听方式 addEvebtListener() / attachEvebt(),特点：同一个元素可以添加多种事件事件监听方式addEvetListener('事件类型',function(){})，里面的事件是字符型，不加on同一个元素同一个事件可以添
复制链接

扫一扫