js-API属性操作与事件

ApI属性操作与事件

事件源 . 事件类型=事件的处理程序

鼠标事件 （重点）on :绑定

• onclick 单击事件
• ondblclick 双击事件
• onmouseover 鼠标移入事件 //支持冒泡（从下到上）
• onmouseout 鼠标移出事件
• onmouseenter 鼠标进入事件 //不支持冒泡（捕获事件 从上到下）
• onmouseleave 鼠标离开事件
• onmousedown 鼠标按下事件
• onmouseup 鼠标抬起事件
• onmousemove 鼠标移动事件
• onfocus 获取焦点事件
• onblur 失去焦点事件

键盘事件

• onkeydown 键盘按下事件
• onkeyup 键盘抬起时间

浏览器事件

window.onsrcoll=funation(){ //浏览器滚动事件
}
window.onload = funation(){ //浏览器加载完成事件
}

DOM的滚动事件

onsrcoll

取消事件

事件源 . 事件类型 = null

监听事件

事件源 . addEventListener(‘事件类型’ , ‘回调函数’)

事件类型把on去掉

取消监听事件

事件源 . removeEventListener(‘事件类型’ , ‘回调函数’)

事件对象

任何事件都有事件对象event 回调函数的第一个参数也是事件对象

浏览器的兼容

event | | window . event

typw：事件类型

元素的id：target.id

clientX clientY pageX pageY 距离浏览器项部和左侧的距离 横纵坐标

clientX clientY 不包括浏览器卷去的宽度和高度

pageX pageY 包括浏览器卷去的宽度和高度

键盘事件

key：键名

keyCode：键码

事件冒泡

先子元素后父元素

阻止冒泡事件(重点)

var event = event | | window.event

event.stopPropagation()

默认事件

a链接的跳转 form表单的提交

阻止默认事件(重点)

var event = event | | window.event

event.preventDefault( )

阻止a链接的跳转

return false

元素的属性操作

获取元素的方法

getAttribute( ’ 属性名 ’ )

设置元素属性（id，class等和name等自定义属性）

setAttribute( ’ 属性名 ’ , ’ 属性值 ’ )

删除元素属性

removeAttribute( ‘属性名’ )

元素的样式设置（重点）

1、对象.style

2、对象.className

3、对象.serAttribute(‘style’)

4、对象.serAttribute(‘class’)

5、对象.style.setProperty(‘Css的属性名’，‘Css的属性值’)

6、对象.style.cssText

//1、对象.style

head.style.backgroundColor ='red'

// 2、对象.className

head.className = 'head'

// 3、对象.setAttribute('style')

head.setAttribute('style','background-color:red')

// 4、对象.setAttribute('class')

head.setAttribute('class','head')

//5、对象.style.setProperty('css属性名','css属性值')

head.style.setProperty('background-color','red')

//6、对象.style.cssText

head.style.cssText = 'background-color:red;height:200px;'

三文表达式

？：