千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip
前端javascript三大组成部分
• ECMAScript 标准语法 es5
DOM (document object model) 文档对象模型
○ 主要是利用js来操作网页的
•BOM（browser object model） 浏览器对象模型
○ 浏览器提供一些方法
•BOM
• 浏览器提供了一些方法给我们有机会操作浏览器的某一些内容
• 浏览器将他提供的API放在window上面,window是一个对象，里面有很多自带的数据
window是一个全局作用域 所有的全局变量和函数也会自动添加到window对象，使用的时候
变量或者函数会自动去window查找
•
弹窗
○ window.alert()
○ alert() 提示框
○ prompt() 弹出输入框
○ confirm() 确认框
○ 这个弹窗仅仅只在自己练习使用 真正开发项目我们需要自己实现弹窗
•
网页的宽度和高度
○ window.innerWidth
○ window.innerHeight
•
屏幕分辨率宽度和高度
○ window.screen.width
○ window.screen.height
•
浏览器事件
onload 网页加载完成的事件
window.onload= function(){
// 有一些操作需要等待网页加载完成之后才执行}
onresize 网页尺寸变化执行的事件
window.onresize= function(){
// 每一次网页尺寸变化都会触发这个事件// 第一次进入的时候是不会触发}
○
onscroll 网页滚动条滚动事件
window.onscroll= function(){
// 只要滚动滚动了就会触发}
获取元素尺寸
• offsetWidth 内容区+padding+border
• clientWidth 内容区+padding
获取元素偏移
• 含义
左偏移
○ offsetLeft
上偏移
○ offsetTop
获取边框的宽度
• clientLeft
• clientTop
创建元素
• document.createElement()
添加元素
• appendChild()
• insertBefore()
修改元素
• replaceChild()
删除元素
• removeChild()
克隆元素
• cloneNode(true)
DOM事件
• 事件：由用户行为触发的代码
构成三要素
○ 事件源 给哪个元素绑定事件
○ 事件类型 用户行为 click dblclick...
○ 事件处理函数 要执行代码 就是函数
绑定事件
○ 事件源.on+事件类型 = 事件处理函数
添加事件监听的方式
事件源.addEventListener(事件类型, 事件处理函数, 执行机制)
默认为false 使用是冒泡机制
设置为true 使用是捕获机制
•
on方式和addEventListener的区别
1. on方式只能绑定一个事件处理函数 addEventListener可以支持多个事件处理函数
取消事件方式不同
removeEventListener()
2.
3. 支持的事件机制不一样（后面讲）addEventListener可以支持两种机制
•
事件对象（event）
• 含义：事件对象是一个在事件处理函数内部 包含了事件触发的时候详细信息
获取event
每一个事件处理函数里面都会自带一个event，这种可能有一些浏览器获取得到是
