当前位置：网站首页>js之DOM事件

 var btns = document.querySelectorAll('button');
        btns[0].onclick = function() {
            alert(1);
        }
        btns[0].onclick = function() {
                alert(2);
            }

2、事件监听 addEventListener W3C推荐

element.addEventListener(type,listener,useCapture)

type:事件类型字符串 click mouseover 不用带on

listener:事件处理函数，事件发生时就会调用该函数

useCapture:可选参数，是一个布尔值，默认false

下列代码依次弹出22，33

  btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })

还可以这样写

  btns[1].addEventListener('click', fn)

        function fn() {
            alert(22);
        }

attachEvent了解 IE9以前的

二、删除事件

removeEventListener

点击div就会弹出，需求是点击一次后不弹出了，删除这个事件。

//传统
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
            alert(1);
            divs[0].onclick = null;
        }
        //
    divs[1].addEventListener('click', fn) //里面的fn不需要调用加小括号

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

三、DOM事件流

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

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫做DOM事件流。

分为三个阶段

捕获阶段逐级

当前目标阶段

冒泡阶段向上传播

js代码只能执行捕获或者冒泡阶段之一，onclick和attachEvent（）只能得到冒泡阶段

  //捕获阶段 如果第三个参数是true 则处于捕获阶段
        // var son = document.querySelector('.son')
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true)
        // var fa = document.querySelector('.father')
        // fa.addEventListener('click', function() {
        //     alert('fa');
        // }, true)
        //冒泡阶段 如果第三个参数false 或者省略  gengguanzhu
        var son = document.querySelector('.son')
        son.addEventListener('click', function() {
            alert('son');
        }, false)
        var fa = document.querySelector('.father')
        fa.addEventListener('click', function() {
            alert('fa');
        }, false)
        document.addEventListener('click', function() {
            alert('ss');
        })

捕获阶段依次弹出fa,son

冒泡阶段依次弹出ss fa son(第三个参数为false或者省略的时候）

四、什么是事件对象

event就是一个事件对象，监听函数小括号里面的，可以当形式参数看，事件对象只有有了事件才会存在，就是系统自动创建的，不需要我们传递参数

事件对象是我们一系列相关事件的集合，跟事件相关的，比如鼠标点击就包含了鼠标的相关信息，鼠标坐标等，如果是键盘操作，就会包含按下了哪个键。

   div.addEventListener('click',function(event){
            console.log(event);
            //这个事件对象我们可以自己命名，event evt e
            //兼容性问题 ie678通过window.eventb
        })

1、e.target和this的区别

e.target返回的是触发事件的对象。this返回的是绑定事件的元素

   var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // this指向ul
            console.log(this); //点击li  打印出ul
            console.log(e.target); //打印出li 点击的li
        })

2、阻止默认行为（比如不让a标签跳转）

e.preventDefault()//DOM推荐的标准写法

  var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //dom推荐的 标准写法

            })
 //传统 
            // a.onclick = function(e){
            //     e.preventDefault();//1.
            //     //低版本
            //     e.returnValue;//2方法
            //     return false; //没有兼容 特点 return 后面的不执行了
            // }

3、阻止事件冒泡

e.stopPropagation()

就不会往上执行了，只会弹出son

  // e.cancelBubble = true;//非标准 
            // if(e && e.stopPropagation){
            //     e.stopPropagation();

            // }else {
            //     window.event.cancelBubble = true;
            // }兼容性写法

五、事件委托

原理：不给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点，我们给父节点添加事件，当e.target能拿到触发事件的源头元素，利用冒泡原理，父元素的事件就会被触发。

传统的给每个li都绑定事件。

 var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = '';


                }
                this.style.backgroundColor = 'pink';
              
            })
        }

利用事件委托，只需要给他们的父节点ul添加，每当e.target被点击，利用冒泡原理，就会触发ul的点击事件，然后再ul里通过e.target就能拿到真正触发事件的li。

 ul.addEventListener('click', function(e) {
            // alert('知否');
            //排他思想
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '';
            }
            // e.target可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })

六、禁止选中和禁止右键菜单

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

七、获得鼠标在页面的坐标

 document.addEventListener('click', function(e) {
            console.log(e.clientX);
            console.log(e.clientY);
            //得到可视区范围内的坐标 不管有没有滚动条 鼠标在可视区、

            console.log(e.pageX);
            console.log(e.pageY);
//有滚动条的话，滚动了过后，可视区同一个位置，坐标会不一样
        })

案例：跟随鼠标移动

 <style>
        div {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: aqua;
            border-radius: 10px;
        }
    </style>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        document.addEventListener('mousemove', function(e) {
            //mousemove只要鼠标移动1px就会触发这个事件
            //每次移动鼠标都会获得最新的坐标 把这个xy坐标作为图片的top和left值
            var x = e.pageX;
            var y = e.pageY;
            console.log(x);
            console.log(y);
            //把坐标给图片
            div.style.left = x - 10 + 'px';
            div.style.top = y - 10 + 'px'; //千万要拼接字符串
        })
    </script>
</body>

八、常用的键盘事件

keyup keydown keypress(和keydown类似，但是不能识别功能键，ctrl,shift...)

keyup弹起了 keydown和keypress都是按下了(特点：按下的时候触发，字还没进去）

执行顺序keydown,keypress,keyup

keyup和keydown不区分大小写，keypress区分

键盘事件对象中的keyCode属性可以得到相应按键的ASCII值

案例：模拟京东按键输入内容

focus()获得焦点

 <!-- 检测用户是否按下了s键，按下了就把光标定到搜索框里面
    keyCode 判断 搜索框获得焦点 focus() -->
    <form action="">
        <input type="text">
    </form>
    <script>
        var input = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
                if (e.keyCode === 65) {
                    input.focus();
                }
            })
            // up谈起的时候触发 说明已经安完了 down按下就会 所以会把a写进去
    </script>

案例:模拟京东快递输入单号

 <!-- 快递输入时，上面的大盒子就会显示 同时里面的字号会变大、
    表单检测用户输入 给表单添加键盘事件
同时表单里面的值获取过来给大盒子做内容 -->
    <!-- down press特点 按下的时候触发 字还没进去 -->
    <div class="search">
        <div class="box"></div>
        <input type="text" value="请输入快递单号">
    </div>
    <script>
        var div = document.querySelector('.box');
        var input = document.querySelector('input');
        input.addEventListener('keyup', function() {
//没有输入的时候不显示
            if (this.value == '') {
                div.style.display = 'none';

            } else {
                div.style.display = 'block';
                div.innerHTML = input.value;

            }

        })
        input.addEventListener('blur', function() {
//失去焦点，大盒子隐藏
            div.style.display = 'none';
            // this.value = '请输入';

        })
        input.addEventListener('focus', function() {
            this.value = '';
            if (this.value != '') {
                div.style.display = 'block';
            }

        })

版权声明
本文为[小白蛋挞]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_61547956/article/details/124328932