事件BOM DOM

1.事件

1.1 事件绑定

# 1.写在html元素中 <button onclick='code'></button> # 2.把事件看成元素对象的方法 btnEle.onclick=function(){ code... } # 3.事件监听 btnEle.addEventListener('click',function(){ },false) false表示冒泡阶段触发(默认) 

1.2 事件的捕获和冒泡

捕获阶段：从祖元素到子元素 冒泡阶段：从子元素到祖元素 事件默认在冒泡阶段触发 

1.3 经常使用事件

# 鼠标事件 click 单击 dblclick 双击 contextmenu 右击 mouseover/mouseenter 鼠标悬停 mouseout/mouseleave 鼠标离开 mousedown 鼠标按下 mouseup 鼠标抬起 mousemove 鼠标移动 # 键盘事件 keydown 键盘按键按下 keyup 键盘按键抬起 keypress 按键按下，只有可输入的按键才能触发 # 表单事件 blur 失去焦点 focus 得到焦点 submit 提交 绑定给form元素 reset 重置 绑定给form元素 select 输入框内容被选中 change 内容改变且失去焦点 适合select选项更改，触发 input 输出内容改变 触发 # 文档事件 load 绑定给body 绑定给window 绑定给 img 、link、script 文档加载完成 unload 文档关闭 beforeunload 文档关闭以前 # 图片事件 load 图片加载完毕 error 图片加载错误 abort 图片加载中断 # 其余事件 scroll 滚动 resize 大小调整 

1.4 Event对象 事件对象

属性 clientX 鼠标的坐标 clientY 鼠标的坐标 keyCode 键盘的按键 ascii码 button 鼠标按键 0 1 2 target 返回元素 具体触发的元素 方法 stopPropagation() 阻止事件冒泡 preventDefault() 阻止元素的默认事件 

2.BOM浏览器对象模型

2.1 window

# 属性 window.innerWidth 窗口的宽 window.innerHeight 窗口的高 history location screen navigator # 方法 setInterval() clearInterval() setTimeout() clearTimeout() Number() String() Boolean() alert() confirm() prompt() ... 

2.2 history

属性 length 方法 back() 退后一步 forward() 前进一步 go() 前进/后退n步 

2.3 location

属性 href 地址 protocol 协议 host 主机名和端口 hostname 主机名 port 端口 pathname 路径名 search url中？后面 hash 锚点 

2.4 screen

屏幕 

2.5 navigator

userAgent 查看用的是什么浏览器 

3. DOM文档对象模型

3.1 常见的dom对象

全部的元素对象 都是dom document 表示整个文档 document.body 获取body元素 document.documentElement 获取HTML元素 

3.2 元素内容

innerHTML innerText