js进阶WebApi基础，事件

一.变量声明

1.1 var、 let 和 const

能使用const尽量使用const，写到后面如果发现不是常量再进行修改，因为const的语音化更好

一般简单数据类型 我们使用let来声明

复杂数据类型我们使用const来声明

为什么？

因为复杂数据类型是储存在堆中，我们去对他的修改，是修改的堆里的内容，并没有修改他的地址

但是不能重新赋值，比如：

const person = {
   uname: 'shadow',
   age: 17,
   gender: '女'
}
person.gender = '男'
console.log(person.gender)  // 男
console.log(person)
//这里我们进行修改他的内容，只是修改堆中的内容，所以用const声明是可以的
​
const person = {
 uname: '李芋圆',
   age: 18,
   gender: '女'
}
//这里我们不可以对person重新赋值，这样就会改变他的地址，需要用let来声明

​

而简单数据类型直接储存在栈里，当我们进行重新复制的会就会改变他的值，所以不能用const声明

// 测试1
let num = 1
num = num + 1
console.log(num)  // 结果是2
//在这里我们对sum进行了重新赋值的操作，所以不能使用const来声明

二.Web APIs的认知

js分为ECMAscript（js基础）和Web APIs

Web APIs分为dom和bom

dom用来操作文档，bom用来操作浏览器

2.1DOM树

把html文档以树状结构表现出来叫dom树

三.自定义属性

自定义属性：

• 在html5中推出来了专门的data-自定义属性

• 在标签上一律以data-开头

• 在DOM对象上一律以dataset对象方式获取

四.事件

4.1事件基础

1.是什么是事件？

用户的行为被检测到

2.什么是事件监听？

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应。

3.事件监听三要素是什么？

事件源：哪个元素被触发了

事件类型：你做了什么？点击、经过等等

事件调用的函数：你点击他要做什么

4.2事件对象

• 事件对象是什么？

  • 也是个对象，这个对象里有事件触发时的相关信息

  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

• 使用场景

  • 可以判断用户按下哪个键，比如按下回车键可以发布新闻

  • 可以判断鼠标点击了哪个元素，从而做相应的操作

  • 一般命名为e、event、ev

    用法：来判断是否按下了回车键

    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
       // console.log(11)
       console.log(e)
       if (e.key === 'Enter') {
           console.log('我按下了回车键')
      }
    })

4.3环境对象

• 函数的调用方式不同，this 指代的对象也不同

• 【谁调用， this 就是谁】 是判断 this 指向的粗略规则

• 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

五.事件流

5.1事件说明

事件流就是事件完整执行的流动路径

当我们触发事件的时候会有两个阶段

1.捕获阶段

2.冒泡阶段

5.2事件捕获和事件冒泡

5.2.1事件捕获：

由外向内执行,代码如下

5.2.2事件冒泡：

由内向外执行

document.addEventListener(
       'click',
       function (e) {
         alert('我是爷爷')
      },
       true//第三个参数，传入true是捕获阶段，默认是不传或者false只有冒泡阶段没有捕获
    )
     document.querySelector('.father').addEventListener(
       'click',
       function (e) {
         alert('我是爸爸')
      },
       true//第三个参数，传入true是捕获阶段，默认是不传或者false只有冒泡阶段没有捕获
    )
     document.querySelector('.son').addEventListener(
       'click',
       function (e) {
         alert('我是儿子')
      },
       true//第三个参数，传入true是捕获阶段，默认是不传或者false只有冒泡阶段没有捕获
     

5.3阻止事件冒泡

document.addEventListener('click', function (e) {
       alert('我是爷爷')
       e.stopPropagation()//阻止冒泡
    })
     document.querySelector('.father').addEventListener('click', function (e) {
       alert('我是爸爸')
       e.stopPropagation()//阻止冒泡
    })
     document.querySelector('.son').addEventListener('click', function (e) {
       alert('我是儿子')
       e.stopPropagation()//阻止冒泡
    })

单词

document.querySelector('css选择器')	元素选择器，获取id要加#，类名要加 .	获取页面中的元素到js
document.querySelectorAll('css选择器')	得到是一个伪数组，有长度，索引号，遍历	获取一个盒子中的所有元素
document.getElementById('id')	id选择器	获取页面中的id元素到js
document.getElementsByTagName('tagName')	标签选择器	能够获取所有的标签
document.getElementsByClassName('className')	类名选择器	获取到类名
.innerText	修改文本	不可以识别html标签,不能输入格式
.innerHTML	修改文本	可以识别html标签，输入格式
div.className = 'nav box'	添加类名	新的类名会替换到旧的类名
元素.classList.add('类名')	追加一个类	追加和删除不回影响以前的类名
元素.classList.remove('类名')	删除一个类	追加和删除不回影响以前的类名
元素.classList.toggle('类名')	切换一个类	追加和删除不回影响以前的类名
disabled	为true禁用按钮，默认false不禁用	button.disabled = true
checked	当input为checkbox，true默认选中☑️，false不选中
clearInterval(定时器ID)	关闭定时器
事件类型	触发方式	说明
元素对象.addEventListener('事件类型'， 要执行的函数)	绑定事件，调出函数做出响应
click	鼠标点击	鼠标事件
mouseenter	鼠标经过	鼠标事件
mouseleave	鼠标离开	鼠标事件
focus	获得焦点
blur	失去焦点	同上
Keydown	键盘按下触发
Keyup	键盘抬起触发	同上
input	用户输入触发	按下得到，输入框事件
change	输入框内容改变触发	松开得到，输入框事件
--------------------------------------------------	-----------	-----------------------------------------------------------------
事件对象.stopPropagation()	阻止冒泡	不会去由内向外去找爸爸，只运行一次
事件对象.preventDefault()	阻止默认行为	阻止一些默认行为，比如说表单提交，a链接跳转
removeEventListener（事件类型，函数名字）	解绑事件，绑定事件取消
scrollLeft和scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth 和 clientHeight	获得元素宽度和高度	不包含border,margin,滚动条 用于获取元素大小，只读
offsetWidth和offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读

.reset()	重置表单	表单提交以后重置表单清空内容
render()	渲染页面	将录入的内容打印到页面上