JavaScript之核心（十一）--- JavaScript DOM事件详解

最新推荐文章于 2023-11-13 19:18:32 发布

不放弃每一天

最新推荐文章于 2023-11-13 19:18:32 发布

阅读量149

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44680403/article/details/105291985

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

12.1 DOM事件

两种格式的不规范写法
事件嵌套在HTML文件中：

<div onclick="console.log('xxx')"></div>
不易于文件分离

事件方法替换：

dom.onclick = function() {};
这种写法只能在这个 DOM 上绑定一个点击事件，下一个设置onclick将会替换上一个事件方法

对此：使用addEventListener()将会是最好的方式

`对于onclick与click不同之处：带on可以在html内嵌，不带on的则需在JavaScript中使用添加事件，写入Listenner`

对于事件的使用：
具体各个事件详解，在这不一一叙说了：传送门

监听DOM事件 ——> 使用DOM操作——> 修改DOM属性

焦点事件：
focus: 表单组件（Input, Textarea, etc…）获取焦点事件
blur: 表单组件（Input, Textarea, etc…）失去焦点事件
onsubmit 表单提交时触发 2

键盘事件

属性 	描述 	DOM
onkeydown 	某个键盘按键被按下。 	2
onkeypress 	某个键盘按键被按下并松开。 	2
onkeyup 	某个键盘按键被松开。 	2

框架/对象（Frame/Object）事件

属性 	描述 	DOM
scroll :文档滚动事件  
resize：窗口放缩事件
onabort 	图像的加载被中断。 ( <object>) 	2
onbeforeunload 	该事件在即将离开页面（刷新或关闭）时触发 	2
onload 	一张页面或一幅图像完成加载。 	2
onunload 	用户退出页面。 ( <body> 和 <frameset>) 	2

具体各个事件详解，在这不一一叙说了：传送门

12.2 冒泡、捕获、委托

冒泡：
冒泡即事件节点开始时，由最具体的元素触发监听事件后（也就是事件发生所在的节点），然后逐级向上触发父亲节点的监听事件，一直传播到最高节点（body节点）。

const likeBtn = document.querySelector('.like-btn');
likeBtn.addEventListener('click', function() {
  console.log('.like-btn');
});
//组织冒泡事件
// ......省略
likeBtn.addEventListener('click', function(e) {
  // 点击事件
  e.stopPropagation()

// ......省略


const workspaceOpt = document.querySelector('.workspace-opt');
workspaceOpt.addEventListener('click', function() {
  console.log('.workspace-opt');
});

const workspace = document.querySelector('.workspace');
workspace.addEventListener('click', function() {
  console.log('.workspace');
});

document.body.addEventListener('click', function() {
  console.log('body');
});


输出：
".like-btn"
".workspace-opt"
".workspace"
"body"

捕获

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。比如说刚才的demo，如果是事件捕获的话，事件发生顺序会相反的

事件委托
原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

12.3 鼠标移动事件

属性 			描述 	    					DOM
click 	当用户点击某个对象时调用的事件句柄。 	2 
ondblclick 	当用户双击某个对象时调用的事件句柄。 	2
onmousemove 	鼠标被移动。 	2


//仅仅作用于当前的节点，不作用于后代节点
onmouseenter 	当鼠标指针移动到元素上时触发。 	2
onmouseleave 	当鼠标指针移出元素时触发 	2
//仅仅作用于当前的节点，同时作用于后代节点
onmouseover 	鼠标移到某元素之上。 	2
onmouseout 	鼠标从某元素移开。 	2

在平时使用中，90%我们都只会使用：

onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。

12.4 表单元素事件

焦点事件：
focus: 表单组件（Input, Textarea, etc…）获取焦点事件
blur: 表单组件（Input, Textarea, etc…）失去焦点事件

对于表单元素，有两种事件可以监听元素内容变化 — input和change
注意区别：
change事件

当用户提交对元素值的更改时触发； change 事件不一定会对元素值的每次更改触发

input输入框的change事件，要在 input 失去焦点的时候才会触发；
change 事件也可用于1. checkbox 值修改以后2. select 选择后

input事件：

只要 value 值修改就会触发

12.5 滚动事件

事件名称：

window.addEventListener('scroll', function() {
  console.log(window.scrollY);//(Y 轴滚动距离)。
});

滚动到底部时：添加新的文章到body中

window.addEventListener('scroll', function() {
  // 可以通过clientHeight获取内容高度
  const height = document.body.clientHeight;

  // 通过screen.height获取浏览器的高度
  const screenHeight = window.screen.height;

  // 当距离底部的距离小于500时，触发页面新增内容
  if (height - window.scrollY - screenHeight < 500) {
    console.log('加载新文章内容');
    // 在底部添加10张图片
    const div = document.createElement('div');
    let str = '';
    for (let i = 0; i < 10; i++) {
      str += `
       <img
        class="first"
        alt=""
        src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
      />
      `;
    }
    div.innerHTML = str;
    document.body.appendChild(div);
  }
});