js事件

事件：就是网页浏览者或者浏览器所作出的某些操作 如点击鼠标 敲击键盘 刷新页面
事件处理程序 所谓事件处理程序就是指事件被触发后要执行的函数，
有自己的名字 该名字由on加事件名称构成 on click onclick
注意:事件处理程序的名称都是小写
事件处理程序的添加方式:HTML事件处理程序
HTML事件处理程序 事件处理程序直接写在开始标签中 不常用
DOM0级事件处理程序
事件处理程序后面直接加一个匿名函数
节点.onclick=function(){console.log("hello");}
事件处理程序后面加一个函数名称,节点.onclick = fn;
DOM0级事件处理程序添加时的注意事件
同种节点,如果要添加的事件是相同的,
**DOM0级事件处理程序的删除方式 事件名.onclick(事件处理程序名称) = null;
oDiv.onclick = null;
DOM2级事件处理程序的添加 用addEventListener函数
节点.addEventListener("事件名",要执行的函数名,事件流)
第一个参数事件名必须由双引号包起来，事件名不加on
第二个参数为要执行的函数名，不需双引号包起来,注意函数名后面不加括号
第三个参数为事件流 值为true 或 false
如果要给同一个节点添加多个事件且事件名相同,那么后添加的事件会覆盖先添加的事件
DOM2级事件处理程序的删除，removeEventListener方法
节点.removeEventListener("事件名",要执行的函数名,事件流)；
所谓的事件流 就是事件的执行顺序 有两种形式: 事件捕获 事件冒泡

(同种事件时涉及到事件流 冒泡 捕获)
事件捕获 事件的执行顺序为大到小
事件冒泡 事件的执行顺序为小到大
事件流的注意事项
DOM0级事件处理程序只支持事件冒泡，DOM2级事件处理程序支持事件捕获和事件冒泡
DOM2级事件处理程序在添加时如果第三个参数为true 表示事件捕获,如果为false表示事件冒泡
第三个值省略默认为事件冒泡

常见的事件
onload 当页面中所有标签都加载完成后触发该事件
onunload 页面关闭时触发(页面被卸载时) 只IE支持
onresize 节点尺寸被更改时触发
onscroll 滚动条拖动时触发

鼠标
onselect 文本框中内容被选中触发

• onchange 域中内容被改变时触发(selsect下拉菜单的值改变时,就是选下拉里的选项时)
  onfocus 表单元素获取焦点时触发
  onblur 表单元素失去焦点时触发
  onsubmit 表单中提交按钮点击时触发 加在form标签中
  onreset 当表单中的重置按钮点击时触发 加在form标签中
  onclick 节点被鼠标单击时触发
  ondblclick 当节点被鼠标左键双击时触发
  onmousedown 鼠标被压下去触发
  onmouseup 鼠标被松开时触发
  onmouseover 鼠标从某个元素移入是触发
  onmouseout 鼠标从某个元素移出是触发
  onmousemove 鼠标在某个元素上移动时触发

键盘
onkeydown 键盘按键被按下去时触发 识别所有按键
onkeyup 键盘上的按键被松开时触发
onkeypress 同onkeydown 但是只识别字符(字母)按钮

***event对象 不需要手动创建 当给某个元素添加事件时浏览器自动创建该对象，该对象的作用是记录当前事件的相关属性和信息。该对象会以参数的形式传递给事件函数，注意地方是event对象存在兼容问题，在谷歌浏览器和火狐浏览器中event对象是以事件函数的参数形式接收,但是在IE浏览器中even对象则是window对象的属性形式保留 所以用下面代码达到兼容
var e = eve || window.event
event对象常用的属性和方法
属性
cancelable
bubbles
type
target 当前事件被触发
currentTarget

 ***
 keyCode 返回键盘按键的编码(键码)，注意编码不是ASCII码
 ctrlKey 判断是否按压了Ctrl键 如果是,结果为true否则为false
 altKey 判断是否按压了alt键。如果是,结果为true否则为false
 shiftKey 判断是否按压了shiftKey键。如果是,结果为true否则为false

 *****
 screenX  获取当前鼠标点击的位置距离屏幕左端的距离 数值型
 screenY  获取当前鼠标点击的位置距离屏幕上端的距离 数值型
 clientX  获取当前鼠标点击的位置距离浏览器左端的距离 数值型
 clientY  上
 offsetX  获取当前鼠标点击的位置距离元素左端的距离  数值型
 offsetY  上
 方法
  preventDefault() 作用是:取消元素的默认行为
  stopPropagation()  取消阻断冒泡

oncontextmenu 右键弹出菜单

preventDefault siblings siblings siblings siblings siblings siblings siblings
closest closest closest closest closest closest closest siblings siblings