jsAPI（续）

1. 事件

（1）鼠标事件

onclick：单击事件
ondblclick：双击事件
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件
onmouseenter：鼠标进入事件
onmouseleave：鼠标离开事件
onmousedown：鼠标按下事件
onmouseup：鼠标抬起事件
onmousemove：鼠标移动事件
onfocus：获取焦点事件{input输入框}
onblur:失去焦点事件{input输入框}

（2）键盘事件

onkeydown 键盘按下事件 （按下时候，输入框是没有东西的）{input输入框}
onkeyup 键盘抬起事件

（3）浏览器事件（方法：后面可以加函数）

onscroll 滚动条滚动事件
onload 浏览器加载完成后执行的事件

2.滚动条

overflow：scroll/auto  （一般写在父盒子里面）

3. 事件的进阶

【取消事件 事件源.事件类型 = null（事件类型保持一致）】
执行事件的步骤：获取元素 绑定事件 书写事件驱动程序
监听事件 addEventListener（‘事件类型’，回调函数） 解除 removeEventListener（调用才能解除）
事件类型不用加on ，回调函数不能加（）
回调函数可以是一个函数，也可以是函数的调用

4.任何事件都有事件对象event

事件函数的第一个参数也是事件对象

5.事件的冒泡

【顺序：只操作内部的盒子】先执行内部盒子的函数，再执行外部盒子的函数
子元素延伸到父元素
mouseenter不支持冒泡，而mouseover支持冒泡
冒泡事件：先执行子元素，再执行父元素（对子元素加事件类型）
捕获事件：先执行父元素，再执行子元素（对子元素加事件类型）
阻止冒泡：event.stopPropagation

6.阻止事件默认行为（a标签 form表单的提交）

e.preventDefault  [e  函数中第一个参数]：只阻止跳转
default：默认的意思

7.阻止a标签跳转

（1）单return 点击事件中，后面加return：false（写在a标签的onclick中）
（2）双return return+函数（写在a标签的onclick中） 函数中加上return：false
（3）先获取再绑定 也是用的return
1.2的缺点：代码不分离，不符合低耦合，高内聚的规范
3的优点：实现了行为与结构的分离

8.元素的样式设置

（1）对象.style    直接打点
（2）对象.className =class名    （添加class，提前设置好）
（3）对象.setAttribute（‘style’，‘css样式’）
（4）对象.setAttribute（‘class’，‘class的值’）
（5）对象.style.setProperty（‘css的属性名’，‘css的属性值’）
（6）对象.style.cssText = ‘直接写css样式’

9.元素的属性操作（元素-标签）

元素自身属性（打点就可以拿到） 自定义属性
getAttribute(‘属性名’)：元素属性值的获取
getAttributeNode(‘属性名’)；获取属性节点 获取属性名
setAttribute（‘属性名’，‘属性值’）：设置元素属性【设置不用获取属性，获取到元素就行】
removeAttribute（‘属性名’）{删除自身的属性值需要先获取}

10.浏览器的兼容

var event = event || window.event
  type : 事件类型
  target：事件源
  元素的id : target.id
  clientX clientY pageX pageY   距离浏览器顶部和左侧的距离  横纵坐标
  clientX clientY 不包括浏览器卷去的宽度和高度
  pageX pageY 包括浏览器卷去的宽度和高度
  key : 键名
  keyCode : 键码