JS事件详解-优快云博客

1.常用的事件

鼠标事件：
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseup 某个鼠标按键被松开
键盘事件:
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下并释放一个键时发生
onkeyup 某个键盘的键被松开
表单事件：
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 用户改变域的内容
onreset 表单重置时触发
onsubmit 表单提交时触发
UI事件：
onload
onresize
onscroll:获取滚动距离 document.documentElement.scrollTop
导航动态吸顶

2.事件对象

定义：用来获取发生事件的事物的详细信息，主要鼠标的位置，键盘的状态，发生事件的对象（事件源）
时机：事件发生，任何事件都会有一个事件对象
e：事件对象
e.target：事件源
e.clientX,e.clientY：距离窗口左上角的位置
e.offsetX,e.offsetY：自己的左上角的位置
e.pageX,e.pageY：文档
e.keyCode
e.target.nodeName:找到事件源的标签名

补充：
1.DOM.offsetWidth,DOM.offsetHeight：获取DOM自身的宽高
2.window.innerWidth,window.innerHeight:当前浏览器窗口的宽高
3.DOM.offsetLeft,DOM.offsetTop：DOM距离浏览器窗口的位置
4.toLowerCase,toUpperCase 转小写转大写

3.事件委托

定义：本来该自己做，委托给其他人去做也叫事件代理
场景：
1万条数据 ul>li 浮动给背景移除移除背景
案例：三个人去快递委托给前台，谁的快递来，前台就去叫谁
好处：1.提升性能 2.给未来出现的元素添加事件

4.事件流

事件流：冒泡和捕获
w3c:首先进入捕获阶段再进入冒泡阶段但IE没有捕获
冒泡：从内向外阻止冒泡
捕获：从外向内捕获错误（捕获错误）

5.事件绑定的方法

<div id="outer" onclick="fn()"></div>

var outer = document.getElementById("outer")
outer.onclick = function(){}

b.
兼容处理事件监听语法
标准下：DOM.addEventListener(‘事件类型’,事件函数,是否捕获)
非标准(IE):DOM.attachEvent(‘事件类型’,事件函数)

c.
移除事件：
DOM.removeEventListener(‘事件类型’,事件函数)
DOM.detachEvent(‘事件类型’,事件函数)

d.
事件监听和普通事件的区别：
1.一个DOM元素绑定多个相同事件，用onclick后面会覆盖前面的
一个DOM元素绑定多个相同事件，用addEventListener 按顺序都执行
一个DOM元素绑定多个相同事件，用attachEvent 先执行后面再执行前面==》事件队列
2.addEventListener可以设置事件捕获

e.
阻止事件冒泡:e.stopPropagation();//阻止事件冒泡

document.querySelector(’#btn’)