JS之事件上
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息。
概述：
事件是一个流程，就是一个监听（预备） 一个触发（当前内容执行了 （进行处理）
用户在页面上操作（监听这个操作）, 然后我们要调用函数来处理（进行处理）.
监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件
事件的模式
内联模式
<div onclick='方法名()'></div>
脚本模式
document.queryseletor('div').onclick = function(){ //操作 } //也会被解析为内联
内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者
触发者.on+对应的事件名 = 处理的函数 对应的事件组成
触发者 一般来说是对应的元素对象
事件名 就是上述分类的事件名
处理函数 由自己定义的函数（handler）（这个函数是事件驱动执行）
二.获取事件对象
标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取对象。
老版本的IE浏览器默认自带event对象，无需再次声明。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
onchange 当对象或选中区的内容改变时触发。
oninput 标准当文本框的内容发生改变时触发。
onpropertychange IE当在对象上发生对象上发生属性更改时触发。 （oninput的IE兼容写法）
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
onkeydown 当用户按下键盘按键时触发。
onkeyup 当用户释放键盘按键时触发。
onload 在浏览器完成对象的装载后立即触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onreadystatechange 当对象状态变更时触发。
onreset 当用户重置表单时触发。 (type='reset')
onresize 当对象的大小将要改变时触发。
onscroll 当用户滚动对象的滚动条时触发。
onselect 当当前选中区改变时触发。
onsubmit 当表单将要被提交时触发。(type='submit')
//除非是输入框 不然是不能调用键盘事件 都是window的 window.onkeydown = function(){ console.log('键盘按下'); } window.onkeyup = function(){ console.log('键盘弹起'); } window.onkeypress = function(){ console.log('字符键按下'); }
// load 窗口的加载 图片的加载 等等 window.onload = function(){ console.log('窗口加载'); } window.onunload = function(){ //清除对应的内存 销毁 console.log('窗口卸载'); } window.onclose = function(){ console.log('窗口关闭'); } var input = document.querySelector('input') input.onchange = function(){ //必须要失去焦点 console.log('value值变化了'); } input.onselect = function(){ //禁止复制粘贴 console.log('当前内容被选择'); } input.onfocus = function(){ console.log('获取焦点'); } input.onblur = function(){ console.log('失去焦点'); } // form表单的事件 onsubmit 提交的时候触发 onreset 重置的时候的触发 document.querySelector('form').onsubmit = function(){ console.log('表单提交'); } document.querySelector('form').onreset = function(){ console.log('表单重置'); } window.onscroll = function(){ //每次滚动距离 console.log('滚动条滚动'); }
button属性
标准浏览器的鼠标事件，会有一个button属性，它是一个数字，代表鼠标按键。
0代表鼠标按下了左键 1代表按下了滚轮 2代表按下了右键
鼠标事件中获取鼠标的位置属性
clientX,clientY：鼠标相对于可视区的位置。
pageX,pageY：鼠标相对于文档的位置。
offsetX,offsetY：鼠标相对于操作元素(鼠标位置)到元素边缘(左上)的位置.
screenX,screenY :鼠标相对于屏幕的位置。
键盘事件的属性
keyCode和which 获取键盘上按键对应的unicode编码
event.keyCode || event.which IE不支持
组合键event.ctrlKey、event.altKey、event.shiftKey 分别代表ctrl alt shift键
if(event.keyCode == 13 && event.ctrlKey) { //ctrl+enter }
默认行为的概念
默认行为是指事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母、图片路径等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
阻止浏览器的默认行为
ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件
return false; 退出执行, 所有触发事件和动作都不会被执行. 可以用来替代 preventDefault（普通的事件处理函数）
六.事件流
事件流描述的是从页面中接收事件的顺序。
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。
事件的冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点,一直到文档document 。
取消冒泡：让当前操作的具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）。
IE下取消冒泡/chrome： ev.cancelBubble=true;
标准取消冒泡： ev.stopPropagation();
注意：事件冒泡的前提--事件和事件类型相同 父子元素关系。
一个元素对象上面可以绑定多个事件处理函数。
target.addEventListener("事件类型", 函数, 是否捕获(布尔值))--标准浏览器事件监听
target.removeEventListener("事件类型", 函数, 是否捕获(布尔值))--标准浏览器取消监听
注意：移除事件监听的参数和添加事件监听的参数是一致的。
target.attachEvent("事件类型",函数) --IE浏览器事件监听
target.detachEvent() --IE浏览器取消监听
DOM 2级事件取代DOM 0级事件,反之不行。
普通的事件使用return false阻止默认行为，事件绑定下面不能使用，只能使用ev.preventDefault() 或者
ev.returnValue = false
Netscape(网景)团队提出的另一种事件流叫做事件捕获,即事件开始时由最不具体的节点应该早接收到事件，
而最具体的节点应该最后接收到事件。
利用冒泡机制，将子元素事件委托给父元素执行。
获取当前操作的目标元素：ev.target || ev.srcElement
获取当前操作的事件类型：ev.type
事件委托的优缺点：
优点：减少事件注册次数，节约内存，提升性能。
缺点：所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。
浙公网安备 33010602011771号