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触发的时候，文本框的字还没有出现，并不能实现同时放大的效果