JS3-高级事件
获取事件和处理事件的第二种方式：事件监听
如何获取和处理鼠标与键盘的基本事件？
事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
- type：事件类型 如click
- listener：事件处理函数
- useCapture：布尔值
ie9以前的版本支持
eventTarget.attachEvent()将制定的监听器注册到eventTarget上，当对象触发指定事件时，指定的回调函数就会执行
该方法接收两个参数：
- eventNameWithOn:事件类型字符串 如onclick
- callback：事件处理函数，
删除事件
- 传统方式
eventTarget.onclick=null;
- 方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture]);
DOM事件流
事件流描述的是从页面中接收事件 的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为3个阶段：
- 捕获阶段 自顶向下
- 当前目标阶段
- 冒泡阶段 从下往上
JS代码只能执行捕获或者冒泡其中一个阶段
onclick和attachment只能得到冒泡阶段
addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false表示在事件冒泡阶段调用
事件对象
div.onclick=function(event) {}
- event就是一个事件对象，写到我们的侦听函数里的小括号里面，当形参来看
- 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
- 事件对象使我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息如鼠标坐标等
- 事件对象可以自己命名 如evt、e、
- 有兼容性问题 ie678通过window.event获取事件对象
事件对象常见属性和方法
a.target 返回触发事件的对象（点了谁返回谁） 标准 this返回的是绑定事件的对象
a.currentTarget和this一样，但是只适用于ie9以上（了解即可）
e.srcElement 返回触发事件的对象 非标准 ie6-8常用
e.type 返回事件的类型
- 阻止默认事件 有时候需要阻止链接跳转
a.returnValue; //ie678阻止默认事件的方法 也可以直接用
a.preventDefault(); //阻止默认事件 可以让链接不跳转
return false; //阻止事件跳转（无兼容性问题）
- 冒泡会导致当多个盒子重叠并同时监听时，由于冒泡原理会一层一层执行，因此有时需要考虑阻止冒泡
a.cancelBubble=true; //非标准
a.stopPropagation(); //重点，标准写法，有兼容性问题
事件委托
事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握。
事件委托也称为事件代理，在jQuery里称为事件委派
不要给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
例如ul里有很多个li都需要监听事件，可以给ul设定监听器，因为点击li，事件会冒泡到ul上，就会触发事件监听器，可以利用对象的target找到当前点击的li
可以实现找到这个li后改变它的背景颜色，大大简化了代码
作用：
只操作了一次DOM，提高了程序的性能
常用的鼠标事件
鼠标事件
click：单击事件
dblclick：双击事件
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：鼠标移动事件
mouseover：移入事件
mouseout：移出事件
mouseenter：移入事件
mouseleave：移出事件
contextmenu：右键事件, 可以使用preventDefault禁用右键菜单
selectstart: 选中事件，可以使用selectstart禁用选中文字（不准复制~）
鼠标事件对象
现阶段主要使用鼠标事件对象和键盘事件对象
clientX,clientY永远是相对于可视窗口的坐标，不会随着滚轮拖动而改变
e.pageX、e.pageY是相对于文档页面的X、Y坐标，IE9+支持
e.screenX、e.screenY相对于电脑屏幕的X、Y坐标
常用键盘事件
键盘事件
onkeyup 某个按键松开
onkeydown 按下时
onkeypress 按下时触发，但是它不识别功能键，比如ctrl、shift、箭头
三个都写时有执行顺序区别，先执行down再执行press然后是up
键盘事件对象
key：‘1’ 直接告诉是哪个键，但是兼容性问题较大
keyCode：可以得到用户按键的ASCii码值
keyup和keydowm事件不区分字母大小写，大写和小写的ASCii码都是小写的码，而keypress区分字母大小写
案例：可以实现按键搜索框自动获取焦点
使用keyCode判断用户是否按下了s键，利用search.focus()实现搜索框获取焦点
最好用keydown判断，防止's'进入了输入框
-
快递单号输入内容时，上面的大盒子显示
-
表单检测用户输入：给表单添加键盘事件
-
同时把快递单号表单里的值获取过来赋值给盒子
-
如果快递单号里面内容为空，则隐藏盒子 con.style.display='none'
-
当文本框失去焦点，隐藏盒子
blur diplay=none
focus {if this.value!='' display=block}//获得焦点时还需要检测输入是否为空
-
注意：此处应该使用keyup，弹起时文字已经在文本框出现了 keydown和keypress触发的时候，文本框的字还没有出现，并不能实现同时放大的效果
