JS基础 ---事件

事件分类

a.窗口事件,只在body和frameset元素中才有效
onload 页面或图片加载完成时
onunload 用户离开页面时

b.表单元素事件,在表单元素中才有效
onchange 框内容改变时
onsubmit 点击提交按钮时
onreset 重新点击鼠标按键时
onselect 文本被选择时
onblur 元素失去焦点时
onfocus 当元素获取焦点时

c.键盘事件,
onkeydown 按下键盘按键时
onkeypress 按下或按住键盘按键时
onkeyup 放开键盘按键时

d.鼠标事件
click 鼠标点击一个对象时
dblclick 鼠标双击一个对象时
mousedown 鼠标被按下时
mousemove 鼠标被移动时
mouseout 鼠标离开元素时
mouseover 鼠标经过元素时
mouseenter 鼠标进入元素时
mouseleave 鼠标移出元素时
mouseup 释放鼠标按键时

mousedown --> [mousemove] --> mouseup --> click
mousemove --> mouseover --> mouseenter --> mousemove --> mouseout --> mouseleave

mouseover/mouseout 与 mouseenter/mouseleave 区别：前者会冒泡

e.其他
onresize 当窗口或框架被重新定义尺寸时
onabort 图片下载被打断时
onerror 当加载文档或图片时发生错误时

事件阶段

捕获 —> target —> 冒泡

由图片我们可以看到，事件是先捕获再冒泡的，而第三个参数就决定了是先捕获还是先冒泡，如果是true就是捕获，反正则是冒泡，我们可以看个例子：

window.addEventListener('click',function() {
	console.log('window');
},true);
dom.addEventListener('click', function() {
	console.log('dom');
},true);

输出结果：window dom （捕获从上往下）

window.addEventListener('click',function() {
	console.log('window');
});
dom.addEventListener('click', function() {
	console.log('dom');
});

输出结果：dom window （冒泡从下往上）

1. 阻止事件冒泡 e.stopPropagation()
2. 阻止事件冒泡（立即结束）e.stopImmediatePropagation()
3. 阻止默认事件 e.preventDefault

事件注册

function onClick(e) {
	console.log('dom click');
}
dom.addEventListener('click', onClick ,true);	//dom添加一个click事件
dom.removeEventListener('click', onClick, true); //dom移除相应的click事件

事件代理

应用了设计模式中的观察者模式：
一个ul下有很多li标签，这些li标签对click事件的处理都是一样的，所以我们没有必要每个li标签都设置一个click事件，我们只需要给ul设置click事件，让ul来观察变化

<ul id="watcher">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

var watch = document.querySelector('#watcher');
watch.addEventListener('click', function(e){
	console.log(e.target.innerText);
});

e.currentTarget 指的是ul（即观察者）
e.target 指的是点击的li