前端学习（七十一） DOM-事件操作（Dom）

事件操作

EventTarget

是一个可接收事件的对象接口，并且可以创建监听器，例如window，document等这些是最常见的监听目标

事件注册

EventTarger.addEventListener(type,listener,useCapture)

type：指的是创建事件的类型，例如，点击事件click，鼠标移动事件mouseover等
listener：回调函数，需要写的函数
userCapture：是否需要捕获阶段

事件注册有通常有2种方式：

方法一：addEventListener

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.addEventListener('click',click,false);

方法二：直接添加点击函数

            var a=document.getElementById('div');
            var click1=function(event){

            }
            a.onclick=click1;

取消事件注册

EventTarget.removeEventListener(type,listener,useCapture)

type：指的是创建事件的类型，例如，点击事件click，鼠标移动事件mouseover等
listener：回调函数，需要写的函数
userCapture：是否需要捕获阶段

事件注册有通常有2种方式：

扫描二维码关注公众号，回复： 2843326 查看本文章

方法一：removeEventListener

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.removeEventListener('click',click,false);

方法二：直接将点击事件赋值为null

            var a=document.getElementById('div');
            a.onclick=null;

浏览器兼容

在IE6,7,8下，是没有addEventLisener和removeEventListener，使用的是attchEvent和detachEvent，另外也没有捕获

事件对象

当事件被触发的时候，传递个事件处理程序的那个对象，先看示例

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.removeEventListener('click',click,false);

这里函数中的参数event，就是事件对象，但是在处理的时候要做一个兼容event = event || window.event，因为在IE6,7,8下event是挂在window对象下的

            var a=document.getElementById('div');
            var click=function(event){
                event = event || window.event
            }
            a.removeEventListener('click',click,false);

另外，这个事件对象还保存了一些状态，例如，鼠标点击事件后，event还保存了鼠标点击位置的x,y坐标，shift按键是否被按了

属性

type：事件的类型，是点击事件，还是鼠标事件，还是键盘事件等

target(srcElement，IE下还要带上.srcElement)：指向的是点击的元素到底是哪个，也就是目标元素

currentTarget：目前事件监听的元素是哪个，当事件处于目标阶段的时候，target和currentTarget才是同一个元素

方法

stopPropagation：阻止冒泡

preventEefault：阻止默认行为的方法

stoplimmediatePropagation：作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

阻止事件传播

event.stopPropagation()

阻止事件传播到父节点，也就是阻止冒泡行为，在IE低版本下，得使用event.cancelBubble=true

event.stoplimmediatePropagation()

这个函数一是阻止了事件传播到父节点，也就是冒泡行为，二是还会阻止后续节点上的其他事件处理，例如，在一个event上绑定了10个click，如果第一个click的listener里面使用了这个方法，那么后续的9个click事件都不会在触发了

阻止默认行为

首先的得理解什么是默认行为，比如，有一些元素是有默认的效果的，例如<a>标签，点击a标签会默认打开一个链接，这个打开链接的过程就是默认行为

Event.preventDefault()

通过这个方法可以阻止事件的默认行为，同样在IE低版本下，得使用Event.returnValue=false

前端学习（七十一） DOM-事件操作（Dom）

猜你喜欢