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