文件名称：事件高级用法及兼容写法
文件大小：18KB
文件格式：DOCX
更新时间：2023-07-29 03:51:56
js 高级事件
一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行 2.事件对象 1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递 Event 常见属性： clientX clinetY 鼠标相对客户端的位置 pageX pageY 鼠标相对于页面的位置 type 事件类型 target 事件作用的节点对象 2）事件的兼容性： 在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件 window.event||e 二、事件绑定和取消 1. 事件绑定 添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。 addEventListener(事件名,事件函数,isBubble) isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制 注意：事件名没有on前缀 removeEventListener(事件名,事件函数,isBubble) 注意：一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用： attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意：事件名 包含on前缀 两种事件绑定的区别： 1.addEventListener： 事件名没有on前缀 可以选择冒泡或者捕获机制 this 指事件调用者 同名事件的执行顺序：先添加先执行 2.attachEvent 事件名需要添加on前缀 不能选择冒泡或捕获的机制 this 指window对象 同名事件的执行顺序：后添加先执行 三、事件流 事件流：事件被触发之后会在DOM树的节点之间传递 冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止 捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素 事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡： 兼容性写法： window.event?window.cancelBubble=true:e.stopPropagation() 四、拦截浏览器的默认行为 拦截浏览器自带的一些事件行为，例如：a超链接的跳转等.... 对象.事件名 return false 对象.addEventListener() e.preventDefault() 对象.attachEvent() e.returnValue=false; retrun false; 五、常见事件 右键事件：oncontextmenu 键盘事件：onkeydown onkeyup onkeypress 键盘事件的属性： key 在IE中不支持 键名称 keyCode 键码 滚轮事件： Onwheel 标准浏览器和IE 对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐 滚轮事件对： wheelDelta 标准浏览器和IE 120 -120 下 120 上 detail 获取 3 六、事件的委托 事件委托：事件添加元素父节点(原理：事件的冒泡机制) 将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件