JS事件高级

Posted cuter、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件高级相关的知识，希望对你有一定的参考价值。

JS事件高级

目标在这里插入图片描述

一、注册事件(绑定事件)

1.1注册事件概述

在这里插入图片描述

1.2addEventListener事件监听方式

在这里插入图片描述

  //2.事件监听注册事件 addeventListenr 
            //(1)里面的事件类型是字符串，必定加引号，而且不带on
            //(2)同一个元素同一个事件可以添加多个监听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert('hi');
        })
        btns[1].addEventListener('click', function() {
            alert('hao a u');
        })

在这里插入图片描述

1.3attachEvent事件监听方式（不推荐）

在这里插入图片描述

1.3注册事件兼容性解决方案

兼容性原则： 首先照顾大多数浏览器，再处理特殊浏览器

 function addEventListener(element, eventName, fn) {
            //判断当前浏览器是否支持addEventListener方法
            if (element.addEventListener) {
                element.addEventListener(eventName, fn); //第三个参数默认是false
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, fn);
            } else {
                //相当于 element.οnclick=fn
                element['on' + eventName] = fn;
            }
        }

二、删除事件（解绑事件）

2.1 删除事件的方式

在这里插入图片描述
传统删除事件方式 eventTarget.onclick = null

 boxs[0].onclick = function() {
                alert(11);
                //1.传统方式删除事件
                boxs[0].onclick = null;
            }

removeEventListener 删除事件方式

  boxs[1].addEventListener('click', fn); //里面的fn不需要调用加小括号

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

datechEvent删除事件方式 IE

  //3.datechEvent删除事件
        boxs[2].attachEvent('onclikc', fn1);

        function fn1() {
            alert(33);
            boxs[2].datechEvent('onclick', fn1);
        }

2.2删除事件兼容性解决方案

在这里插入图片描述

三、DOM事件流

事件流 描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
在这里插入图片描述
在这里插入图片描述
注意

  1. JS代码中只能执行捕获或者冒泡其中的一个阶段
  2. onclick和attachEvent只能得到冒泡阶段
  3. addEventListener(type,listener[,userCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写就是默认false），表示事件在冒泡阶段调用事件处理程序。
  4. 实际开发中，很少使用事件捕获，更关注事件冒泡
  5. 有些事件是没有冒泡的，比如onblur，onfocus，onmouseover，onmouseleave
  6. 事件冒泡有些时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

捕获阶段
在这里插入图片描述

//dom事件流 三个阶段
        //1.JS代码中只能执行捕获或者冒泡其中一个阶段
        //2.onclick和attachEvent(ie) 只能得到冒泡阶段
        //3.捕获阶段  如果addEventListener第三个参数是true  那么处于捕获阶段。document->html->body->father->son
         var son = document.querySelector('.son');
         son.addEventListener('click', function() {
             alert('son');
         }, true)
         var father = document.querySelector('.father');
         father.addEventListener('click', function() {
                 alert('father');
             }, true)

冒泡阶段

   var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false)
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false)
        document.addEventListener('click', function() {
            alert('document');
        }, false)

在这里插入图片描述

四、事件对象

4.1事件对象

在这里插入图片描述

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick = function(event) {
        //         console.log(event);
        //         alert('你好');
        //     }
        div.addEventListener('click', function(event) {
                console.log(event);
            })
            //1.event就是一个事件对象 写到侦听函数的小括号里面  当形参看
            //2.事件对象只有有了事件才会存在，它是系统自动创建的，不需要传递参数
            //3.事件对象是事件的一系列相关数据的集合，跟事件相关的。比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件里面就包含了键盘事件的信息。比如判断用户按下了哪个键
            //4.事件对象我们可以自己命名，比如event、evt、e
            //5.事件对象也有兼容性问题 ie678，通过window.event
    </script>

</body>

在这里插入图片描述
事件对象也有兼容性问题 ie678，通过window.event

 console.log(e);
 console.log(window.event);

在这里插入图片描述
兼容性写法（实际开发放心用e就可以）

  e = e || window.event;

4.2事件对象的使用语法

在这里插入图片描述

4.3事件对象的兼容性方案

事件对象本身获取存在兼容性问题:
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。

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

在这里插入图片描述

4.4.1e.target

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

  console.log(e.target);
  console.log(this);

在这里插入图片描述
2. e.target指向我们点击的那个对象 谁触发了这个事件 就指向谁 我们点击的是li.target 指向的就是li

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

在这里插入图片描述
区别: e.target点击了那个元素，就返回那个元素；this 哪个元素绑定了事件，那么就返回谁
3. 跟this有个非常相似的属性 currentTarget ie6~8不兼容(推荐用this)

console.log(e.currentTarget);

4.4.2阻止默认行为

1.e.type返回事件类型

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

        function fn(e) {
            console.log(e.type);
        }

在这里插入图片描述
2.阻止默认行为
e.preventDefault();
阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交等

 //2.阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交
        var a = document.querySelector('a');
        console.log(a);
        a.addEventListener('click', function(e) {
                e.preventDefault(); //dom标准写法
            })
            //传统注册方式
        a.onclick = function(e) {
            //普通浏览器    e.preventDefault()方法
            e.preventDefault();
            //低版本浏览器 ie6~8   e.returnValue;属性
            e.returnValue;
            //我们可以利用return false 也能阻止默认行为 没有兼容性问题;
            //特点是:return 后面代码不执行了，而且只限于传统注册方式
            return false;
            alert(11)
        }

在这里插入图片描述

五、阻止事件冒泡

5.1阻止事件冒泡的两种方式

在这里插入图片描述
没阻止冒泡前:
在这里插入图片描述

 var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); //stop 停止  Propagation传播
            e.cancelBubble = true;

        }, false)
        var father = document.querySelector('.father');
        father.addEventListener('click', function(e) {
            alert('father');
        }, false)
        document.addEventListener('click', function(e) {
            alert('document');
        }, false)

两种阻止事件冒泡方式:

  e.stopPropagation(); //stop 停止  Propagation传播
  e.cancelBubble = true;

阻止后:
在这里插入图片描述

5.2阻止事件冒泡的兼容性解决方案

if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }

实际开发里面推荐使用 e.stopPropagation();

六、事件委托(代理、委派)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
注意 这里没有注册li标签，而是通过事件委托的方式，给ul注册的点击事件
我点击li后，e.target检测到我点击的是li标签。然后通过冒泡的方式，传递给ul。

<script>
        // var lis = document.querySelectorAll('li');
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].onclick = function(e) {
        //         alert('11');
        //     }
        // }
        //事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('知否知否，应有弹框在手');
            console.log(e.target);
            //e.target;这个可以得到当前点击的对象
            //排他思想
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '#fff';
            }
            e.target.style.backgroundColor = 'pink';
        })
    </script>

七、常用的鼠标事件

7.1常用的鼠标事件

在这里插入图片描述

7.1.1禁止鼠标右键和鼠标选中

在这里插入图片描述
禁止鼠标右键菜单 contextmenu:
在这里插入图片描述

  var span = document.querySelector('span');
        span.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        })

禁止鼠标选中 selectstart:
在这里插入图片描述

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

7.2鼠标事件对象

在这里插入图片描述
1.client 鼠标在可视区域的x和y坐标
就算页面再宽再高，都是以目前浏览器的可视区为参照物。

     console.log('窗口可视区坐标X', e.clientX);
     console.log('窗口可视区坐标Y', e.clientY);

在这里插入图片描述

2.page鼠标在页面区域的x和y坐标 重点！！！
page获得的坐标是以页面的大小为参照物获取x和y坐标的

  console.log('页面文档坐标X', e.pageX);
  console.log('页面文档坐标Y', e.pageY);

在这里插入图片描述
比如:红框为浏览器可视窗口
粉色盒子为页面

在这里插入图片描述
3.screen返回鼠标相对于电脑屏幕的坐标

console.log(e.screenX);
console.log(e.screenY);

八、常用的键盘事件

8.1常用键盘事件

在这里插入图片描述

 <script>
        //常用的键盘事件
        //1.keyup按键弹起的时候触发
        // document.onkeyup = function() {
        //     console.log('我弹起了');
        // }
        document.addEventListener('keyup', function(e) {
                console.log('我弹起up了');
            })
            //2.keydown 按键按下的时候触发
        document.addEventListener('keydown', function(e) {
                console.log('我按下了down');
            })
            //3.keypress按键按下的时候触发
        document.addEventListener('keypress', function(e) {
                console.log('我press了');
            })
            //4.三个事件的执行顺序 keydown->keypress->keyup
    </script>

在这里插入图片描述

8.2键盘事件对象

在这里插入图片描述

8.3ASCII码表

在这里插入图片描述

  <script>
        //键盘事件对象中的keycode属性可以得到相应键的ASCII码值
        //我们可以利用keyCode返回的ASCII码值来判断用户按了哪个键
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up', e.key);
            console.log(e.keyCode);
            //1.keyup和keydown事件不区分字母大小写 a和A得到的都是65
            if (e.keyCode === 65) {
                alert('你按下了a键');
            }


        })
        document.addEventListener('keypress', function(e) {

            // console.log(e);
            console.log('press', e.key);
            console.log(e.keyCode);

            //2.keypress区分字母大小写

        })
    </script>

在这里插入图片描述
按下s键 自动获得光标
在这里插入图片描述
text.focus();获得光标

var text = document.getElementById('text');
        //console.log(text);
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                text.focus();
            }
        })

以上是关于JS事件高级的主要内容，如果未能解决你的问题，请参考以下文章

JS高级程序设置笔记

高级前端养成39js专精07之Event Loop

js事件高级

JS高级程序设计学习笔记之JS事件

JS事件高级

JS事件高级