DOM操作词典大全——今日词条：事件高级

欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

文章目录

一、注册事件

给元素添加事件：注册事件或绑定事件

传统方式

利用 on 开头的事件，如onclick

具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后的会覆盖前面的

var div = document.querySelectorAll('div');
       div[0].onclick = function() {
    
    
           alert(11);
       }

方法监听注册

addEventListener()

IE9之前的IE不支持此方法，可使用attachEvent()代替

特点:同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

使用：eventTarget.addEventListener(type,listener[, useCapture])

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

二、删除事件

解绑传统注册方式

eventTarget. onclick = null;

扫描二维码关注公众号，回复： 13170081 查看本文章

var div = document.querySelectorAll('div');
       div[0].onclick = function() {
    
    
           alert(11);
           div[0].onclick = null;
       }

解绑方法监听注册方式

eventTarget.removeEventListener(type，listener[,useCapture] ) ;

eventTarget.detachEvent (eventNamewithon,callback);

//这里要用函数关键字自定义函数
       div[1].addEventListener('click',fn)//里面的fn,不需要调用加小括号
       function fn() {
    
    
           alert(22);
           div[1].removeEventListener('click',fn);
       }
       //
       div[2].attachEvent('onclick',fn1)
       function fn1() {
    
    
           alert(33);
           div[2].datachEvent('click',fn);
       }

三、DOM事件流

事件流描述的是从页面中接收事件的顺序。

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

三个阶段

捕获阶段
捕获阶段如果addEventListener第三个参数是 true那么则处于捕获阶段
顺序为：document -> html -> body -> father -> son
当前目标阶段
冒泡阶段
冒泡阶段如果addEventListener第三个参数是 false 或者省略那么则处于冒泡阶段
顺序为： son -> father -> body -> html -> document

1、Js代码中只能执行捕获或者冒泡其中的一个阶段。

2、onclick和attachEvent只能得到冒泡阶段。

在这里插入图片描述

事件对象

//事件对象：传统
        var div = document.querySelector('div');
        div.onclick = function(event) {
    
    
            console.log(event);
        }

 //事件对象：方法监听
        div.addEventListener('click', function (event) {
    
    
            console.log(event);
            console.log(window.event);
        })

    //event就是一个事件对象，写到侦听函数的小括号里，当形参看

    //事件对象只有有了事件才会存在，他是系统自动创建的，不需要传递参数

    //事件对象是事件一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，比如坐标等

    //这个事件对象我们可以自己命名比如event . evt、eI

    //事件对象也有兼容性问题ie678通过window. event,兼容性写法e = e || window.event;

事件对象常见属性和方法

//e.target 返回的是触发事件的对象（元素)
		var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
    
    
            console.log(e.target);
        })

//返回事件类型 e.type;
		var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        function fn(e) {
    
    
            console.log(e.type);//返回事件类型
        }

//阻止默认行为  e.preventDefault()
		var a = document.querySelector('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;
            alert('111');
        }

//阻止冒泡 dom 推荐 stopPropagation()
		var father = document.querySelector('.father');
        father.addEventListener('click', function (e) {
    
    
                alert('father');
                //阻止冒泡 dom 推荐 stopPropagation()
                e.stopPropagation();
                // e.cancelBubble = true; //非标准
            },
            false);
      	  document.addEventListener('click', function () {
    
    
                alert('document');
            },
            false)

鼠标事件对象
在这里插入图片描述

//禁止选中文字:selectstart  （了解）
document.addEventListener('selectstart',function(e){
    
    
            e.preventDefault();
        })

键盘事件对象(常用的键盘事件)

keyup 按键弹起的时候触发

keydown 按键按下的时候触发能识别功能键

keypress 按键按下的时候触发不能识别功能键

三个事件的执行顺序 keydown – keypress – keyup

		//1. keyup 按键弹起的时候触发
 		document.addEventListener('keyup', function() {
    
    
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
    
    
                console.log('我按下了press');
            })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
    
    
                console.log('我按下了down');
            })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

注意

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

keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65

keypress 事件区分字母大小写 a 97 和 A 65

我们可以利用keycode返回的ASCII码值来判断用户按下了那个键

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

 <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
  <script>
      var ul = document.querySelector('ul');
      ul.addEventListener('click',function(e) {
    
    
          alert('知否知否，点我应有弹框在手！');
        //   e.target.style.backgroundColor = 'skyblue';
      })
  </script>

四、面试题

一、事件委托

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素
上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

二、解释一下变量的提升

变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并
且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。

var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2

点赞加关注，持续更新实用技巧、热门资源、软件教程等
有任何软件影视教程资源考证资料等需求留言即可