事件
事件组成
1,触发谁的事件
事件源
2,触发是什么事件
click mouseover mouseout
3,事件触发之后,干什么
事件函数 (干什么写在事件函数中)
事件对象
类似于飞机的“黑匣子” 用于保存 一个事件发生的时候,所有的信息
比如:事件发生时鼠标的坐标
如何获取事件对象:
兼容性问题:在不同浏览器上 获取方法不一样
在IE 以及DOM标准:全局的对象(window下) 名字event
在高版本IE 以及 chrome 不支持event来获取事件对象的,另外一种方式
自动变成事件函数的第一个参数(这个参数就是事件对象)
兼容性写法:
btn.onclick=function(ev){
var e = ev || event;
}
注意:
只有事件发生的时候,写在事件函数中,event保存的就是当前事件的所有的信息
事件对象上有用的信息
坐标相关
clientX clientY 事件发生时,光标 距离可视区的坐标
offsetX offsetY 事件发生时 ,光标 距离元素的坐标
pageX pageY 事件发生时,光标距离 页面的距离(和滚动条无关)
判断鼠标按键(左键、右键) 了解
button
判断 点击的 鼠标(左键、右键)
左键:0 右键:2
阻止默认事件:在事件函数中 return false
浏览器事件
- load` : 页面全部资源加载完毕
scroll
: 浏览器滚动的时候触发
鼠标事件
- click` :点击事件dblclick
:双击事件contextmenu
: 右键单击事件 内容菜单事件mousedown
:鼠标左键按下事件mouseup
:鼠标左键抬起事件mousemove
:鼠标移动mouseover
:鼠标移入事件mouseout
:鼠标移出事件mouseenter
:鼠标移入事件mouseleave
:鼠标移出事件
键盘事件
- keyup: 键盘抬起事件- keydown: 键盘按下事件
- keypress : 键盘按下再抬起事件(时间稍长)
表单事件
- change` : 表单内容改变事件 input
: 表单内容输入事件submit
: 表单提交事件
触摸事件 不要记()
- touchstart` : 触摸开始事件touchend
: 触摸结束事件touchmove
: 触摸移动事件
keyCode返回的是当前按键的unidecode编码
回车 13
左 37
上 38
右 39
下 40组合按键 了解
如果一段代码块需要按下多个按钮触发
事件对象 提供了三个属性
altKey
ctrlKey
shiftKey
当我们按下了alt键 altKey的值 是true否则是false
另外一种绑定事件的方式
dom0标准
js中:
元素.on事件名 = 函数
元素.onclick = function(){//code}
function fn(){//code}
元素.onclick = fn;
缺点:
1,一个元素,相同的事件只能绑定一个事件函数
2,顺序无法改变 永远是从内向外触发
dom2标准
事件监听
dom标准:
元素.addEventListener(“事件名”,fn[,true/fase]);
优点:
可以绑定多个事件
可以改变事件触发顺序
兼容性:
IE下事件监听
语法:
元素.attachEvent(“on事件名”,fn);
注意:不能改变顺序
DOM操作
创建一个dom对象
document.createElement(“标签名”);
插入:
内部
父元素.appendChild(插入的元素)
作为父元素的最后一个子元素插入的
外部
父元素.insertBefore(新的元素,在谁之前);
删除
父元素.removeChild(删除的元素)
替换一个元素
父元素.replaceChild(新的元素,被替换的元素);
文档碎片:
作用:提高代码运行效率,减少页面的重新渲染
页面什么时候回重新渲染: 扩展(高工资 dom重构和回流)
当我们改变了元素的布局相关样式
(宽高、位置、元素显示消失)