一、注册事件两种方式
传统方式,同一个元素同一个事件,只能执行一个。新方法addEventListener()可以执行多个,按顺序执行。
addEventListener(type,function);支持i9及以上。
attachEvent(type,function);i9以前的。不推荐使用。
二、删除事件(解绑事件)
2.1 删除事件的方式:
(1)传统注册方式:eventTarget.onclick = null;
(2)removeEventListener(type,function)
(3)detachEvent不推荐。支持i9以前的。
三、DOM事件流
3.1 理论知识,什么事DOM事件流
3.2 使用代码验证事件流
四、事件对象
4.1 什么是事件对象
4.2 事件对象常见的属性和方法
4.2.1 e.target和this的区别
(1)e.target返回的是触发事件的对象(元素),this返回的是绑定事件的对象(元素)
比如给ul绑定事件,点击li时触发事件。那么e.target指向li,this指向ul
兼容性问题:
了解:跟this有个非常相似的属性 currentTarget ie678使用的
4.2.2 阻止默认行为(让链接不跳转或者点击提交按钮不提交。)
三种方式。
- e.preventDefault()
- e.returnValue
- return false
4.2.3 阻止事件冒泡
e.stopPropagation()
e.cancleBubble()
4.2.4 事件委托(代理、委派)(面试重点)
利用e.target获取是哪个子节点被点击 。
4.2.5 禁止选中文字和禁止右键菜单
但是可以用F12来复制。哈哈哈
4.2.6 获得鼠标在页面中的坐标
案例:跟随鼠标移动的天使。
4.2.7常用键盘事件
4.2.8 keyCode判断用户按下的哪个键(当前已经被淘汰了)
e.keyCode可以得到按下键的ASCII码值
案例:模拟京东按键输入内容