JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象

最新推荐文章于 2024-07-05 00:52:46 发布

2401_84412194

最新推荐文章于 2024-07-05 00:52:46 发布

阅读量1.1k

点赞数 13

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84412194/article/details/138925581

版权

程序员专栏收录该内容

202 篇文章 1 订阅

订阅专栏

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

	- [三、DOM事件流](#DOM_45)
	- [四、事件对象（重要）](#_72)
	- [五、事件委托（代理、委派）](#_103)
	- [六、常用的鼠标事件](#_127)
	- [七、常用的键盘事件](#_151)

一、注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式
在这里插入图片描述
方法监听注册方式：（重要）
同一个元素同一个事件可以添加多个事件处理程序

attachEvent()：ie9以前，尽量不用

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

传统方式删除事件：divs[0].onclick = null;
removeEventListener删除事件：divs[1].removeEventListener(‘click’, fn);
detachEvent删除事件：div[2].detachEvent(‘onclick’, fn1);

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        //1. 传统方式注册事件
        divs[0].onclick = function () {
            alert(11);
            //1. 传统方式删除事件
            divs[0].onclick = null;
        }
        //2. addEventListener方式注册事件（ie9之后）
        divs[1].addEventListener('click', fn);
        function fn() {
            alert(22);
            //2. removeEventListener删除事件
            divs[1].removeEventListener('click', fn);
        }
        //3. attachEvent方式注册事件（ie9之前，谷歌现在不支持）
        divs[2].attachEvent('onclick', fn1);
        function fn1() {
            alert(33);
            //3. detachEvent删除事件
            div[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

三、DOM事件流

在这里插入图片描述

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        //捕获阶段（document->html->body->father->son） 第三个参数为true
        //冒泡阶段（son->father->body->html->document） 第三个参数为false（不写默认值）
        son.addEventListener('click', function () {
            alert('son');
        }, true);

        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);
    </script>
</body>

1.开发中一般使用冒泡阶段，就是addEventListener第三个参数为默认值false时，onclick 和 attachEvent只能得到冒泡阶段
2.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

四、事件对象（重要）

事件对象event

    <script>
        var div = document.querySelector('div');
        //1. event（或者写作e、evt） 就是一个事件对象 当形参来看
        //2. 事件对象只有有事件（onclick）才存在 它是系统自动创建的
        //3. event包含了和事件相关的数据集合 例如鼠标坐标等等
        //4. 事件对象也存在兼容性问题 ie678 要用window.event来获取
        div.onclick = function (event) {
            console.log(event);
        }
    </script>

在这里插入图片描述
e.target和this的区别：
e.target：返回触发事件的对象（点击了哪个元素，就返回哪个元素）
this：返回绑定事件的对象（哪个元素绑定的事件，就返回哪个元素）
例如：可能ul>li 给ul绑定了onclick事件，因此this是ul，但是点击时可能点了li，此时e.target为li，通过冒泡阶段，ul的点击事件也能触发

阻止默认行为：让链接不跳转让提交按钮不提交

e.preventDefault(); dom标准写法 ie9以上
e.returnValue; 低版本浏览器 ie678
return false; 没有兼容性问题，仅限于div.onclick = function(e){}的传统注册方式，return false后面的代码不执行

阻止事件冒泡（重要）

e.stopPropagation(); //ie9以上
window.event.cancelBubble = true; //ie678

五、事件委托（代理、委派）

面试常问：
在这里插入图片描述



### 常用的JavaScript设计模式

* 单体模式

* 工厂模式

* 例模式

  ![](https://img-blog.csdnimg.cn/20210616215753130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

  

### 函数

* 函数的定义

* 局部变量和全局变量

* 返回值

* 匿名函数

* 自运行函数

* 闭包

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

  ![](https://img-blog.csdnimg.cn/20210616215826268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

2401_84412194

关注

13
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。例如：可能ul>li 给ul绑定了onclick事件，因此this是ul，但是点击时可能点了li，此时e.target为li，通过冒泡阶段，ul的点击事件也能触发。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。方法监听注册方式：（重要）
复制链接

扫一扫