JavaScript 学习笔记 day15 2021-4-25

JavaScript 学习笔记 day15 2021-4-25

5.8 三种动态创建元素区别

区别

1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2.innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘

3.innerHTML创建过个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

4.createElement（）创建多个元素效率稍低一点点，但是结构更清晰

6.DOM重点核心

创建

1.document.write

2.innerHTML

3.createElement

增

1.appendChild

2.insertBefore

删

1.removeChild

改

1.修改元素属性：src、href、title等

2.修改普通元素内容：innerHTML、innerText

3.修改表单元素：value、type、disabled

4.修改元素样式：style、className

查

1.DOM提供的API方法

2.H5提供的新方法

3.利用节点操作获取元素：父（parentNode）子（children）兄（previousElementSibling、nextElementSibling）

注册事件

方法监听注册方式

• w3c 标准 推荐方法
• addEventListener()它是一个方法

eventTarget.addEventListener(type,listener[,useCapture])

type：事件类型字符串，比如click，mouseover

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数

删除事件

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick = null

2.方法监听注册方式

1.eventTarget.removeEventListener(type,listener[,useCapture])

var divs = document.querySelectorAll('div')
divs[0].onclick = function () {
  alert(11)
  //1.传统方式删除事件
  divs[0].onclick = null
}
  //2.removeEventListener
divs[1].addEventListener('click', fn)//里面的fn 不需要调用加小括号

function fn() {
  alert(22)
  divs[1].removeEventListener('click',fn)
}

3.DOM事件流

DOM事件流分为3个阶段:

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

//dom 事件流 三个阶段
//1.js代码中只能执行捕获或者冒泡其中的一个阶段
//2.onclick 和 attachEvent(ie)只能得到冒泡阶段
//3.捕获阶段 如果addEventListener 第三个参数时 true 那么则处于捕获阶段
// var son = document.querySelector('.son')
// son.addEventListener('click', function () {
//   alert('son')
// },true)
// var son = document.querySelector('.son')
// var father = document.querySelector('.father')
// son.addEventListener('click', function () {
//   alert('son')
// }, true)
// father.addEventListener('click', function () {
//   alert('father')
// }, true)
//4.冒泡阶段 son->father->body->html->document
var son = document.querySelector('.son')
var father = document.querySelector('.father')
son.addEventListener('click', function () {
  alert('son')
})
father.addEventListener('click', function () {
  alert('father')
})
document.addEventListener('click',function () {
  alert('document')
})

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

//1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象
//区别：e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div')
div.addEventListener('click', function (e) {
  console.log(e.target)
})
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
  //我们给ul绑定了事件 那么this就指向ul
  console.log(this);
  //e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
  console.log(e.target)
})

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

//1.返回事件类型
var div = document.querySelector('div')
div.addEventListener('click',fn)
div.addEventListener('mouseover',fn)
div.addEventListener('mouseout',fn)
function fn(e) {
  console.log(e.type)
}
//2.组织默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a')
a.addEventListener('click',function (e) {
  e.preventDefault() //dom标准写法
})

5.阻止冒泡的两种方式

常见事件对象的属性和方法
阻止冒泡 dom推荐的标准 stopPropagation()

var son = document.querySelector('.son')
var father = document.querySelector('.father')

son.addEventListener('click', function (e) {
  alert('son')
  e.stopPropagation()
})
father.addEventListener('click', function () {
  alert('father')
})
document.addEventListener('click', function () {
  alert('document')
})

6.事件委托

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

  //事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul')
ul.addEventListener('click',function (e) {
  // alert('知否知否，点我应有弹框在手！')
  e.target.style.backgroundColor = 'pink'
})

7.常用的鼠标事件

//1.context 我们可以禁用右键菜单
document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
})
//2. 禁止选中文字 selectstart
document.addEventListener('selectstart',function (e) {
  e.preventDefault()
})

鼠标事件对象

//鼠标事件对象 MouseEvent
document.addEventListener('click', function (e) {
  //1.client 鼠标在可视区域的x和y
  console.log(e.clientX)
  console.log(e.clientY)
  //2.page鼠标在页面文档的x和y坐标
  console.log(e.pageX);
  console.log(e.pageY);

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

常用的键盘事件

//1.keyup按键弹起的时候触发// document.onkeyup = function () {//   alert('我弹起了')// }document.addEventListener('keyup',function () {  alert('我弹起了')})//2.keydown按键按下的时候触发document.addEventListener('keydown',function () {  alert('我按下了down')})//3.keypress按键按下的时候触发 但是它不识别功能键 比如ctrl shift等document.addEventListener('keypress',function () {  alert('我按下了press')})

1. BOM概述

1.1 什么是BOM

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

DOM

• 文档对象模型
• DOM就是把【文档】当做一个【对象】来看待
• DOM的顶级对象是document
• DOM主要学习的是操作页面元素
• DOM是W3C标准规范

BOM

• 浏览器对象模型
• 把【浏览器】当作一个【对象】来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2.window对象的常见事件

2.1 窗口加载事件

window.onload是窗口（页面）加载时间，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数

load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行 加载速度比load更快一些

3.定时器

3.2 setTimeout()定时器

  //1.setTimeout  //语法规范：window.setTimeout(调用函数，延时事件)  //1.window在调用的时候可以省略  //2.这个延时时间单位是毫秒，但是可以省略，省略默认为0  //3.这个调用函数可以直接写函数 还可以写 函数名  //4.页面中可能有很多的定时器，我们经常给定时器加标识符  setTimeout(function () {      },2000)  function callback() {    console.log('boom')  }var timer1 =  setTimeout(callback,3000)var timer2 =  setTimeout(callback,5000)

//1.setInterval//语法规范：window.setInterval(调用函数，延时时间)setInterval(function () {  console.log('continue')},1000)//2.setTimeoout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器//3.setInterval 重复调用

3.6 this指向问题

  //this指向问题 一般情况下this的最终指向的是哪个调用它的对象  console.log(this)  //1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)  function fn() {    console.log(this)  }  fn()  setTimeout(function () {    console.log(this)  }, 1000)  //2.方法调用中谁调用this指向谁var o = {    sayHi:function () {      console.log(this)    }}o.sayHi()  var btn = document.querySelector('button')  btn.onclick = function () {    console.log(this)  }  btn.addEventListener('click',function () {    console.log(this)  })  //3.构造函数中this指向构造函数的实例  function Fun() {    console.log(this)  }  var fun = new Fun() 

4.执行机制

4.3 同步和异步

由于主线程不断地重复获得任务、执行任务、再获得任务、再执行，所以这种机制被称为时间循环（event loop）

5.location对象

5.1 什么是location对象

window对象给我们提供了一个location属性用于获取设置窗体的url，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

location.href 获取或者设置 整个URL

location.host 返回主机（域名）

location.port 返回端口号 如果未写返回空字符串

location.pathname 返回路径

location.search 返回参数

location.hash 返回片段