【DOM进阶及BOM-学习小结】

꒰ঌsnail໒꒱

已于 2022-07-17 22:23:26 修改

阅读量217

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2022-06-13 20:13:52 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/125241899

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、DOM的事件处理

1、事件

（1）事件源：触发事件的对象。
（2）事件类型：触发了什么样类型的事件。
（3）事件处理程序：事件被触发后执行的函数（程序段）。

2、Javascript中绑定事件的方式

①传统方式：注册的事件具有唯一性（同一个元素同一个事件只能设置一个处理函数），若同一个元素同一个事件设置多个处理函数，则最后的处理函数会覆盖前面的处理函数。

元素对象名.事件 = 事件处理程序
btn.onclick = function(){}
div.onmouseover = function(){}

②事件监听方式：同一个对象的同一个事件可以绑定（注册）多个事件处理程序。

DOM对象.addEventListener(type,callback,[capture]);
type:表示事件类型（不带on)。如click,load,mouseover
callback:表示事件处理程序。可以是函数名，也可以是匿名函数。
[capture]:可选参数，
默认值为false（表示以冒泡方式处理事件)
true(表示以捕获方式处理事件）。

3、javascript中删除事件的方式

（1）传统方式：
DOM对象.事件名=null

（2）标准浏览器方式
DOM对象.removeEventListener(type,callback)

4、事件流

事件流：是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

（1）网景公司（Netcape):采用事件捕获方式

（2）微软公司（Microsoft):采用冒泡方式。

（3）W3C：采用中和方式（事件前期采用捕获方式：只捕获不处理，事件后期阶段采用冒泡）

5、事件对象（Event)

事件对象：当事件发生时，event中保存的是与事件相关的信息的集合。每个事件处理程序中都包含该事件对象(即每个事件处理程序中的事件对象event是默认存在的）

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

属性及方法	解释说明
e.target	输出事件对象
e.type	输出事件类型
e.stopPropagation()	阻止事件冒泡
e.preventDafault()	阻止默认事件

☀️举个例子（对e.target和e.type属性）：

<body>
<button id="btn">事件对象</button><br>
<script>
    let btn = document.querySelector('#btn')
    // let a1 = document.querySelector('#a1')
    btn.addEventListener('click',function(e){
        console.log('事件对象：',e.target)//输出事件对象
        console.log('事件类型：',e.type)//输出事件类型   
    })

</script>
</body>

在这里插入图片描述
☀️举个例子（对e.preventDafault() 方法）

<body>
<a href="http://www.baidu.com" id="a1">百度一下</a>
<script>
    let a1 = document.querySelector('#a1')

    a1.addEventListener('click',function(e){
        e.preventDefault()//阻止默认事件：点击页面链接时，页面不跳转
    })
</script>
</body>

可以看到点击百度以下超链接不跳转，说明阻止默认事件方法成功：
在这里插入图片描述

(1）e.target和this的区别：

A、e.target：表示触发事件的对象。若事件没有被触发，该对象不存在。
B、this:表示绑定的事件对象。无论事件是否被触发,this是存在的

☀️举个例子：

<body>
    <ul>
        <li>西安交通大学</li>
        <li>西北工业大学</li>
        <li>西安电子科技大学</li>
        <li>西安邮电大学</li>
        <li>西北政法大学</li>
    </ul>

    <script>
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){//事件委托，在li父元素ul上注册事件，并执行事件处理程序。
            console.log('this：',this)  //指的是绑定事件的对象为ul
            console.log('e.target:',e.target)//e.target指的是触发事件的对象是li
        })
    </script>
</body>

可以看到this指的是绑定事件的ul,e.target指的是绑定事件的li,如下图所示：
在这里插入图片描述

（2）事件委托
事件委托：在子元素不注册事件，在父元素中注册事件，事件处理程序也是在父元素的事件中执行。

<style>
    li:hover{
        cursor: pointer;
    }
</style>
<body>
    <ul>
        <li>西安交通大学</li>
        <li>西北工业大学</li>
        <li>西安电子科技大学</li>
        <li>西安邮电大学</li>
        <li>西北政法大学</li>
    </ul>

    <script>
    // 需求：在li点击鼠标，改变背景色
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){//事件委托，在li父元素ul上注册事件，并执行事件处理程序。
            console.log('this：',this)  //指的是绑定事件的对象为ul
            console.log('e.target:',e.target)//e.target指的是触发事件的对象是li
            e.target.style.background = 'pink'//在父组件改变子组件的样式
        })
    </script>
</body>

在这里插入图片描述
7、常见的鼠标事件

鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，
所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示:

时间名称	事件触发时机
onclick	单击鼠标左键时触发
onfocus	获得鼠标指针焦点触发
onblur	失去鼠标焦点触发
onmouseover	鼠标指针经过时触发
onmouseout	鼠标指针离开时触发
onmousedown	当按下任意鼠标按键时触发
onmouseup	当释放任意鼠标案件时触发
onmousemove	在元素内当鼠标指针移动时持续触发

①禁止鼠标右击菜单

分析：
事件类型：contextmenu – 上下文菜单
事件源(事件对象)：document
事件处理程序：关闭默认行为 — 阻止默认事件

contextmenu主要控制应该何时显示上下文菜单，主要应用于程序员取消默认
的上下文菜单，示例代码如下。

<body>
    <script>
        // 在页面中屏蔽鼠标右键快捷菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault()
        })
    </script>
</body>

②禁止鼠标选中

分析：
事件类型：selectstart
事件对象：document
事件处理程序：关闭默认选中行为

selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁
止该事件的默认行为，示例代码如下。

 <div>测试文本 测试文本</div>

 <script>
      //   在页面中禁止鼠标选中
      document.addEventListener('selectstart',function(e){
            console.log('鼠标选中效果被关闭')
            e.preventDefault()
        })
 </script>
</body>

事件触发之前：
在这里插入图片描述

事件触发之后，测试文本不可以被选中：
在这里插入图片描述

8、鼠标事件对象

鼠标事件对象：MouseEvent，是跟鼠标事件相关的一系列信息的集合，可以
用来获取当前鼠标的位置信息，鼠标事件位置属性如下所示：

(1)鼠标的位置

a、浏览器页面当前窗口的可视区域

位置属性（只读）	描述
clientX	鼠标指针位于浏览器页面当前窗口的可视区域的水平坐标（X轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口的可视区域的垂直坐标（Y轴坐标）

b、屏幕的坐标

位置属性（只读）	描述
screenX	鼠标指针位于屏幕的水平坐标（X轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（Y轴坐标）

c、文档中的坐标

位置属性（只读）	描述
pageX	鼠标指针位于文档的水平坐标（X轴坐标）， IE6~IE8不兼容
pageY	鼠标指针位于文档的垂直坐标（Y轴坐标）， IE6~IE8不兼容

☀️举个例子：

案例需求:简单实现图片跟随鼠标移动的效果(不考虑兼容性)。
案例分析:需要使用鼠标指针移动事件mousemove，每次鼠标移动，都会获得
最新的鼠标指针坐标，把这个x和y坐标作为图片的top和left值就可以实现图片
的移动。

<style>
    img{
        position: absolute;
        top:2px;
    }
</style>
<body>
    <img src="../images/001.gif" alt="" width="50" height="50">
    <script>
        let pic = document.querySelector('img')
        document.addEventListener('mousemove',function(e){
            let x=e.pageX
            let y=e.pageY
            pic.style.left=(x-20) +'px'
            pic.style.top=(y-20) +'px'
        })
    </script>
</body>

效果图

9、键盘事件

keypress:键盘的某个按键被按下时触发，不能识别功能键（shift,alt,ctrl等）
特点：保存的按键的ASCII码值，可以区分字母的大小写

keydown:键盘的某个键被按下时触发。
特点：保存的是按键的虚拟键码，不区分字母的大小写。

keyup:键盘的某个键松开时触发。
特点：保存的是按键的虚拟键码，不区分字母的大小写。

10、键盘事件对象

键盘事件对象:KeyBoardEvent
属性keyCode:事件对象的ASCII码值，通过该属性可以知道用户按的是哪个键。

<body>
    搜索框：<input type="text">
    <script>
        let input =document.querySelector('input')
        document.addEventListener('keyup',function(e){//keyup是不区分大小写，所以默认字母都是从65开始
            if(e.keyCode==83){//因为ASCII码是83等于s,所以按下的是s键
                 input.focus()
            }
        })
    </script>
</body>

由下图可以知道，当按下s键，搜索框被选中：

☀️按s键之前：
在这里插入图片描述
☀️按s键之后：

😄举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .search{
        position:relative;
        width: 278px;
        margin: 100px;
    }
    .con{
        display: none;
        position: absolute;
        top:-40px;
        width:171px;
        left:78px;
        border:1px solid rgba(0,0,0, .2);
        box-shadow:0 2px 4px rgba(0,0,0, .2);
        padding:5px 0;
        font-size: 18px;
        line-height: 23px;
        color: #333;

    }
    .con::before{
        content:'';
        width: 0;
        height: 0;
        position:absolute;
        top:28px;
        left: 78px;
        border:8px solid #000;
        border-style:solid dashed dashed;
        border-color: #fff transparent transparent;
    }
</style>
<body>
    <div class="search">
        <div class="con"> </div>
            <label>
                快递单号：
                <input type="text" placeholder="请输入你的快递单号" class="num">
            </label>
    </div>
    <script>
        //1、获取元素
        let con=document.querySelector('.con')
        let  numInput=document.querySelector('.num')
        // 2、给文本框绑定keyup事件
        numInput.addEventListener('keyup',function(){
            //2.1若文本框中没有数据，则提示框隐藏
            if(this.value==''){
                con.style.display='none';
            }else{//2.2若文本框里面有数据，则显示这个提示框，并将文本框的数据显示在提示框中
                con.style.display='block';
                con.innerText=this.value;//不能用innerHTML因为它包含其它标签。

            }
        })
        //3、给文本框绑定失去焦点（blur)事件，当文本框失去焦点时，提示框隐藏
        numInput.addEventListener('blur',function(){
            con.style.display='none'
        })
        //4、给文本框绑定获得焦点（focus)事件，当文本框获得焦点并且不为空时，显示提示框
        numInput.addEventListener('focus',function(){
            if(this.value!==''){
                con.style.display='block'
            }
            
        })
    </script>
</body>
</html>

☀️效果如下：
在这里插入图片描述

二、BOM

1、BOM含义

BOM：浏览器对象模型，独立于内容与浏览器进行交互的对象，核心是Windows对象。

2、DOM和BOM的区别？

（1）DOM()：文档对象模型。把文档看做对象，顶级对象（核心对象）是document。
（2）BOM():浏览器对象模型，把浏览器看作对象，顶级对象（核心对象）是window。

三、window对象的常见事件

1、页面加载事件(载入事件)

页面加载事件(载入事件)：window.onload当文档的内容加载完成后触发该事件。

（1）window.οnlοad=function(){}

    <script src="../js/d1.js"></script>
<body>
    <script>
        // 方法一：
         window.onload = function(){
            alert('我是页面加载完成后的消息')
         }
    </script>
</body>

js:

alert('我是javascript的消息窗口')

（2）<body οnlοad=‘函数名()’></body>

 <script src="../js/d1.js"></script>
<body onload="show()">
    <script>
        //方法二：
        function show(){
            alert('我是页面加载完成后的消息')
        }
    </script>
</body>

js：

alert('我是javascript的消息窗口')

效果展示如下：

（3）window.addEventListener(‘事件类型’，事件处理程序）

2、调整窗口大小的事件

（1）window.onresize =function(){}
（2）window.addEventListener(‘resize’,function(){})
☀️举例如下：

<body>
    <script>
        window.onresize = function(){
            alert('窗口大小被改变');
        }
    </script>
</body>

只要拖动窗口，改变窗口大小，都会弹跳出如下提示框：
在这里插入图片描述

꒰ঌsnail໒꒱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【DOM进阶及BOM-学习小结】

BOM：浏览器对象模型，独立于内容与浏览器进行交互的对象，核心是Windows对象。（1）DOM()：文档对象模型。把文档看做对象，顶级对象（核心对象）是documnet。（2）BOM():浏览器对象模型，把浏览器看作对象，顶级对象（核心对象）是window。（1）事件源：触发事件的对象。（2）事件类型：触发了什么样类型的事件。（3）事件处理程序：事件被触发后执行的函数（程序段）。①传统方式：注册的事件具有唯一性（同一个元素同一个事件只能设置一个处理函数），若同一个元素同一个事件设置多个处理函数，则最
复制链接

扫一扫