JavaScript核心 DOM BOM操作——part2

最新推荐文章于 2023-04-21 10:51:44 发布

墨瑒

最新推荐文章于 2023-04-21 10:51:44 发布

阅读量212

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43502432/article/details/113738468

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

一、事件高级
二、BOM浏览器对象模型

一、事件高级

1. 注册事件（2种方式）

1.1 注册事件概述

在这里插入图片描述

1.2 addEventListener()事件监听方式（IE9支持）

在这里插入图片描述
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

在这里插入图片描述

1.3 attacheEvent()事件监听（IE678支持）

在这里插入图片描述

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
在这里插入图片描述

1.4 事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型：

在这里插入图片描述

2. 删除事件（解绑事件）

2.1 删除事件的方式

在这里插入图片描述

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

在这里插入图片描述

3. DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。

当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

在这里插入图片描述

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。
在这里插入图片描述

DOM 事件流会经历3个阶段：

1、捕获阶段

2、当前目标阶段

3、冒泡阶段

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
在这里插入图片描述

4. 事件对象

4.1 什么是事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

1、谁绑定了这个事件。

2、鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

4.2 事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

所以，在事件处理函数中声明1个形参用来接收事件对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehk1N6sE-1612669801906)(images/1551169537789.png)]

4.3 事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

1、标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

2、在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

在这里插入图片描述

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。

只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

4.4 事件对象的属性和方法

在这里插入图片描述

4.5 e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）。
e.target 是事件触发的元素。

常情况下terget 和 this是一致的，

但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），

这时候this指向的是父元素，因为它是绑定事件的元素对象，

而target指向的是子元素，因为他是触发事件的那个具体元素对象。

4.6 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

<a href="http://www.baidu.com">百度</a>
<script>
    // 2. 阻止默认行为 让链接不跳转 
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
        e.preventDefault(); //  dom 标准写法
    });
    // 3. 传统的注册方式
    a.onclick = function(e) {
        // 普通浏览器 e.preventDefault();  方法
        e.preventDefault();
        // 低版本浏览器 ie678  returnValue  属性
        e.returnValue = false;
        // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
         return false;
    }
</script>

5. 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处。
在这里插入图片描述

<div class="father">
    <div class="son">son儿子</div>
</div>
<script>
    var son = document.querySelector('.son');
	// 给son注册单击事件
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
        window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);

    var father = document.querySelector('.father');
	// 给father注册单击事件
    father.addEventListener('click', function() {
        alert('father');
    }, false);
	// 给document注册单击事件
    document.addEventListener('click', function() {
        alert('document');
    })
</script>

阻止事件冒泡的兼容性处理
在这里插入图片描述

6. 事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

什么是事件委托

把事情委托给别人，代为处理。

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

生活中的代理：

在这里插入图片描述

js事件中的代理：

在这里插入图片描述
事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

我们只操作了一次 DOM ，提高了程序的性能。

7. 常用鼠标事件

7.1 常用的鼠标事件

在这里插入图片描述
1、禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

2、禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

7.2 鼠标事件对象

在这里插入图片描述

7.3 获取鼠标在页面的坐标


// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
    console.log(e.clientX);
    console.log(e.clientY);
    console.log('---------------------');

// 2. page 鼠标在页面文档的x和y坐标
    console.log(e.pageX);
    console.log(e.pageY);
    console.log('---------------------');

// 3. screen 鼠标在电脑屏幕的x和y坐标
    console.log(e.screenX);
    console.log(e.screenY);
})

8. 常用的键盘事件

8.1 键盘事件

在这里插入图片描述

8.2 键盘事件对象

在这里插入图片描述

使用keyCode属性判断用户按下哪个键


// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
    console.log('up:' + e.keyCode);
    // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
    if (e.keyCode === 65) {
        alert('您按下的a键');
        } else {
        alert('您没有按下a键')
        }
    })
    document.addEventListener('keypress', function(e) {
        // console.log(e);
        console.log('press:' + e.keyCode);
    })

二、BOM浏览器对象模型

1. BOM概述

1.1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

在这里插入图片描述

1.2 BOM的构成

BOM 比 DOM 更大，它包含 DOM。
在这里插入图片描述

1.3 顶级对象window

在这里插入图片描述

2. window对象的常见事件

2.1 页面（窗口）加载事件

第1种

在这里插入图片描述

window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
在这里插入图片描述
第2种

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

IE9以上才支持！！！

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。


window.addEventListener('load', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('点击我');
    })
})
window.addEventListener('load', function() {
    alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
    alert(33);
})

2.2 调整窗口大小事件

在这里插入图片描述

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

1、只要窗口大小发生像素变化，就会触发这个事件。

2、我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度


// 注册页面加载事件
window.addEventListener('load', function() {
    var div = document.querySelector('div');
    // 注册调整窗口大小事件
    window.addEventListener('resize', function() {
        // window.innerWidth 获取窗口大小
        console.log('变化了');
        if (window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
})

3. 定时器（两种）

3.1 两种计时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

3.2 setTimeout() 炸弹定时器

开启定时器

在这里插入图片描述

普通函数是按照代码顺序直接调用。

简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

// 回调函数是一个匿名函数
    setTimeout(function() {
        console.log('时间到了');

    }, 2000);
function callback() {
    console.log('爆炸了');
}
// 回调函数是一个有名函数
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

3.3 停止setTimeout()定时器

在这里插入图片描述

3.4 setInterval() 闹钟定时器

开启定时器

在这里插入图片描述

3.5 停止setInterval()定时器

1551321444559

3.6 this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向

1、全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

2、方法调用中谁调用this指向谁
3、构造函数中this指向构造函数的实例

4. JS执行机制

4.1 JS是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 同步和异步

同步
同步任务都在主线程上执行，形成一个执行栈。

异步
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

4.3 JS执行机制

1、先执行执行栈中的同步任务。 2、异步任务（回调函数）放入任务队列中。
3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任
务结束等待状态，进入执行栈，开始执行。

在这里插入图片描述
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

5. location对象

5.1 什么是 location 对象

在这里插入图片描述

5.2 URL

在这里插入图片描述

5.3 location 对象的属性

在这里插入图片描述

5.4 location对象的常见方法

在这里插入图片描述

6. navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7. history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

在这里插入图片描述
history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

在这里插入图片描述

墨瑒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript核心 DOM BOM操作——part2

文章目录一、事件高级1. 注册事件（2种方式）1.1 注册事件概述1.2 addEventListener()事件监听方式（IE9支持）1.3 attacheEvent()事件监听（IE678支持）1.4 事件监听兼容性解决方案2. 删除事件（解绑事件）2.1 删除事件的方式2.2 删除事件兼容性解决方案3. DOM事件流4. 事件对象4.1 什么是事件对象4.2 事件对象的使用4.3 事件对象的兼容性处理4.4 事件对象的属性和方法4.5 e.target 和 this 的区别4.6 阻止默认行为5. 阻
复制链接

扫一扫