day11-DOM和BOM回顾及事件(上)

最新推荐文章于 2022-11-08 00:17:57 发布

不想上班ing

最新推荐文章于 2022-11-08 00:17:57 发布

阅读量163

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/m0_71706639/article/details/127347557

版权

本文介绍了浏览器对象模型(BOM)和文档对象模型(DOM)的基本概念，包括window、location、history等核心对象及其属性和方法，并详细讲解了DOM的组成、事件机制及事件委托等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.BOM (bowser object model) 浏览器对象模型

window 窗口对象 （全局的变量及函数都是属于window （global对象））

location 地址栏对象 （获取地址栏内容使用地址栏跳转页面）

属性：hash、search、host、hostname、pathname、port、protocol、origin、href
方法：assign 、replace

history 历史对象

属性：state、length
方法：forward 、back、go、pushState、replaceState

screen 屏幕对象

属性：width、height、availWidth、availHeight..

navigator 导航对象

属性：userAgent
frames 窗口（window）

2.DOM （document object model）文档对象模型

document 文档对象（整个html文档）
element 元素对象（所有的标签）
attribute 属性对象（所有标签里面的属性）
text 文本对象（显示的文本）

3.dom里面的知识点

空文本（换行符、制表符、空格..）也是一个文本节点
属性如果是自身自带的属性可以直接点出来（input.value、img.src 、a.href ...）如果不是就不能点出来。
dom会操作对应的html的内容、当你的html内容发生变化、那么对应的页面就会重新渲染。会造成大量的重绘和回流。（后续dom操作要被舍弃（效率））

4.重绘和回流（回流必定重绘）

重绘对应一个元素操作（不改变他的宽高和对应的位置而改变其他的样式）
回流对应的元素操作（改变对应的元素所有的内容宽高和对应的位置都会发生变化）

5.什么是事件

事件是一个异步机制。他相当于一个执行者执行 -- 观察者观察 --- 处理函数执行这个流程称为事件。

例子:我去便利店买包华子、老板告诉我没货。我跟老板说等有货通知我。货来了老板就通知我了，我去就买了。

//分析
//事件名 ----  买华子
//执行者 ---- 我
//观察者 --- 老板
//处理  ---  买了
//示例
<button>点击</button>
    <script>
      //获取元素
      var button = document.querySelector("button");
      button.onclick = function () {
        console.log("点击了");
      };
    </script>

事件的组成

事件名 click（内置的）
执行对象 button （元素对象）
处理函数后续的函数（自定义函数）
观察者（js引擎事件引擎）

在js内书写的事件，他的观察者都是事件引擎。我们需要关注就是前面的三个内容（事件名、执行对象、处理函数）

6.事件的声明书写方式

内联模式（在标签内部）

    <!-- 内联模式就是在onclick书写中设置对应的代码 -->
    <button onclick="alert('你好')">你好</button>
    <button onclick="fn(1)">你好</button>
    <script>
      function fn(arg) {
        alert("我是函数执行" + arg);
      }
    </script>

脚本模式(在script中常用)

<button>脚本模式</button>
//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
    console.log('你好');
}
function handler(){
    console.log('处理函数执行了');
}
btn.onclick = handler//处理函数执行了

内联模式和脚本模式的区别

内联模式里面的函数需要手动调用而对应的脚本的模式的处理函数自动调用
内联模式里面的函数调用的this指向window 对应的脚本模式里面的处理函数的this指向当前的调用者

6.事件名的分类

鼠标事件（鼠标触发的 mouse）

click 单击事件
dblclick 双击事件
mousedown 按下
mouseup 弹起
mouseenter 移入
mouseleave 移出
mouseover 移入
mouseout 移出
mousemove 移动
contextmenu 右键点击

注意事项

click和对应mousedown和mouseup的执行顺序（mousedown -- mouseup -- click）
mouseenter(mouseleave)和mouseover(mouseout)的区别（mouseenter 子元素不会触发 mouseover子元素会触发）

 <div>
      我是一个div
      <p>你好</p>
    </div>
    <script>
      //获取div
      var div = document.querySelector("div");
      //脚本模式 元素对象.on+事件名=处理函数
      div.onclick = function () {
        console.log("单击事件执行了");
      };
      //双击事件必定触发单击
      div.ondblclick = function () {
        console.log("双击事件执行了");
      };
      //鼠标的按下和弹起 执行顺序:先按下 再弹起 再单击
      div.onmousedown = function () {
        console.log("鼠标按下");
      };
      div.onmouseup = function () {
        console.log("鼠标弹起");
      };
      //鼠标的移进和移出
      //enter 和 leave 进入子元素不会触发
      div.onmouseenter = function () {
        console.log("鼠标移进去了");
      };
      div.onmouseleave = function () {
        console.log("鼠标移出了");
      };
      //over 和 out 进入子元素也会触发
      div.onmouseover = function () {
        console.log("鼠标over移入了");
      };
      div.onmouseout = function () {
        console.log("鼠标out移出了");
      };
      //鼠标的移动
      div.onmousemove = function () {
        console.log("鼠标移动");
      };
    //鼠标的点击右键(点击事件不会触发)
      div.oncontextmenu = function () {
        console.log("右键点击了");
      };
    </script>

键盘事件（键盘触发的 key）

keydown 按下
keyup 弹起
keypress 字符串（除功能键的其他键）

注意事项

执行顺序 keydown按下- keypress字符键 - keyup弹起
keypress 一定会触发 keydown

<input type="text">
<script>
   //获取输入框
   var input = document.querySelector('input')
   //键盘相关事件
   input.onkeydown = function(){
       console.log('键盘按下');
  }
   //在input 弹起会出现两次
   input.onkeyup = function(){
       console.log('键盘弹起');
  }
   //字符键按下 （除了功能键）
   input.onkeypress = function(){
       console.log('字符键按下');
  }
   window.onkeypress = function(){
       console.log('在window上触发了keypress事件');
  }
</script>

HTML事件（HTML中自带的一些事件（只能用于专门HTML））

window的事件

加载事件（load）
卸载事件（unload）
关闭窗口的事件（onclose）
打印之前调用的事件 (onbeforeprint)
卸载之前调用的事件（onbeforeunload）
滚动栏发生变化的事件（onscroll）

 <style>
      div {
        width: 100px;
        height: 100px;
        overflow: scroll;
      }
    </style>
  </head>
  <body style="height: 3000px">
    <div>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
      <p>1111</p>
    </div>
//加载事件
window.onload = function(){
   console.log('hello');
}
//卸载事件（刷新）
window.onunload = function(){
   console.log('卸载');
}
//关闭窗口事件 （清除相关缓存和对应的资源操作）
window.onclose = function(){
   console.log('关闭');
}
//打印之前调用 调用print方法之前 更改打印的然后继续打印
window.onbeforeprint = function(){
   console.log('打印了');
}
//在卸载之前调用 将一些内容回收
window.onbeforeunload = function(){
   console.log('卸载之前');
}
//滚动栏滚动
window.onscroll = function(){
   console.log('滚动栏位置发生变化');
}
//加载事件的其他使用
var image = new Image() //构建一个图片对象
image.onload = function(){ //如果图片加载好了
   image.src = '图片地址' //给图片设置对应的src地址
}
//onscroll的其他使用
document.querySelector('div').onscroll = function(){
   console.log('div的滚动栏滚动了');
}

表单的事件

submit 表单提交事件
reset 表单重置事件
select 内容被选中（只针对于输入框和文本域）
change 表单的value值发生变化
input 可输入的表单标签里面进行输入
blur 失去焦点
focus 获取焦点

    <form>
      <input type="text" name="" value="" />
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </form>
//表单相关的事件
//加给整个form表单的事件
document.forms[0].onsubmit = function(){
   console.log('提交了');
}
document.forms[0].onreset = function(){
   console.log('重置了');
}
//change value值发生变化  必须失去焦点的时候使用
document.querySelector('input').onchange = function(){
   console.log('值变化了');
}
// input 输入对应的值的时候调用
document.querySelector('input').oninput = function(){
   console.log('输入值');
}
//select 选择里面的内容
document.querySelector('input').onselect = function(){
   console.log('选择值了');
}
//失去焦点
document.querySelector('input').onblur = function(){
   console.log('失去焦点了');
}
//聚焦
document.querySelector('input').onfocus = function(){
   console.log('获取焦点了');
}

练习

 <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>别爱我没结果</div>
    <script>
      //获取div
      var div = document.querySelector("div");
      //移入
      div.onmouseenter = function () {
        this.innerText = "我爱你没有错";
      };
      //移出
      div.onmouseleave = function () {
        this.innerText = "别爱我没结果";
      };
      //移动
      div.onmousemove = function () {
        this.style.backgroundColor = randomColor();
      };
      function randomColor() {
        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var b = Math.random() * 255;
        return `rgb(${r},${g},${b})`;
      }
    </script>

 <input type="text" name="" value="" />
    <span></span>
    <script>
      //获取input输入框
      var input = document.querySelector("input");
      //获取span
      var message = input.nextElementSibling;
      //给输入框添加事件
      input.oninput = function () {
        //获取对应的value值的长度
        var len = this.value.length;
        var msg;
        if (len < 6) {
          msg = `你至少还需要输入${6 - len}位`.fontcolor("red");
        } else if (len >= 6 && len <= 16) {
          var msg = `成功`.fontcolor("green");
        } else {
          msg = `超出长度`.fontcolor("red");
        }
        message.innerHTML = msg;
      };
    </script>

7.什么是event 事件源对象

event 被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。

处理函数中Arguments

处理函数也是一个函数，函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments

var btn = document.querySelector('button')
btn.onclick = function(){
   //点击事件触发以后对应的arguments里面有一个对应的pointEvent的对象
   console.log('arguments',arguments);
   console.log(`arguments[0]`, arguments[0]);
   //这个对象是在arguments里面存在第一位里面以属性为主 那么这个对象表示什么
   //这个参数其实就对应的事件的一些内容 称为事件源对象 event
}
window.onkeydown = function(){
   console.log('arguments',arguments);
   //keyboardEvent 键盘的事件源对象
   console.log(`arguments[0]`, arguments[0]);
}
从上述代码可得到对应的事件执行的处理函数里面会传递一个参数 ，这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。
故而我们可以简写为
//这个地方的e 一般写做 e 或者是 event
btn.onclick = function(e){
   //这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题
   //兼容写法
   e = e || window.event
   //这个e表示的就是第一个参数 那么他也就是我们对应的event对象
   console.log(`e`, e);
}

event的常用属性

鼠标坐标的相关属性

screenX 表示鼠标离屏幕的X距离
screenY 表示鼠标离屏幕的Y距离
pageX 表示当前的鼠标离页面的X距离（包含卷起部分）
pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）
clientX 表示鼠标离页面可视区的X距离
clientY 表示鼠标离页面可视区的Y距离
offsetX 表示鼠标离父元素偏移的X距离
offsetY 表示鼠标离父元素偏移的Y距离

<style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <button type="text">你好</button>
    </div>
    <script>
      //获取button
      var btn = document.querySelector("button");
      btn.onclick = function (e) {
        e = e || window.event;
        //常用的属性
        //在页面上的x坐标及y坐标
        // console.log(`e.x`, e.x);
        // console.log(`e.y`, e.y);有偏差不需要记忆
        //在页面上的x坐标及y坐标 包含卷起来的部分 滚动栏滚动的距离
        console.log(e.pageX);
        console.log(e.pageY);
        //在页面上的x坐标及y坐标 不包含卷起来的部分 不包含滚动的距离
        console.log(e.clientX);
        console.log(e.clientY);
        //离屏幕的x距离及y距离
        console.log(e.screenX);
        console.log(e.screenY);
        //没有定位之前基于页面 有定位以后基于包含的他定位元素(用的不多)
        console.log(e.layerX);
        console.log(e.layerY);
        //离button的距离 offset偏移的父元素x y的距离(当前事件添加的元素 基于当前的this)//加给document事件的时候offset不会被使用的
        //offset的特性有奶便是娘 找有定位的
        console.log(e.offsetX);
        console.log(e.offsetY);
      };
    </script>

按钮辅助的相关属性

ctrlKey 是否按下了ctrl键
altKey 是否按下了alt键
shiftKey 是否按下shift键

//辅助的按键属性 返回布尔类型值
console.log(e.ctrlKey);//是否长按ctrl
console.log(e.altKey);//是否长按alt
console.log(e.shiftKey);//是否长按shift

鼠标相关的属性

button 按下是那个键

//按下的键是什么 三个值 0 1 2 
console.log(e.button);//左键0 中间滚轮1 右键2

事件及相关触发的属性

type 当前的事件类型

//事件类型 返回事件名
console.log(e.type); //click

target 表示当前事件的触发对象

//触发者元素 
console.log(e.target);

currentTarget 表示加事件的元素

//加事件的元素 
console.log(e.currentTarget);

键盘相关的属性

key 表示当前按下的键的字符（区分大小写）
keyCode （在keydown里面不区分大小全部是大写的ascii码）
code （key+大写的字符）
charCode （在keypress里面才管用他区分大小写返回对应的ascii码）

window.onkeypress = function(e){
   console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母
   console.log(e.keyCode);//当前按下键的大写字母 ascii码
   console.log(e.charCode); //当前字符的ascii码 keypress里面
   console.log(e.key);//表示当前按下的键 （兼容问题）
}

8.事件委托机制（事件代理）

将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。

示例

 <style>
      .active {
        color: red;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
   e = e || window.event
   //判断当前触发元素是否为li
   if (e.target.tagName == 'LI') {
       //排他思想
       //把所有的li的class清除
       for (var item of this.children) {
           item.className = ''
      }
       e.target.className = 'active'
  }
}