Javascript中的事件对象与事件类型

2021-02-24  本文已影响0人  JJesson

接上次看JS的事件冒泡和捕获，所以顺带就把事件相关的知识都看完好了

而且想到一个好的学习方法，第一天自己看，第二天把前一天学习的东西写下来，一方面可以当复习，一方面当重新整理并且分享

事件对象

事件处理程序函数在处理事件时，或者说DOM在触发某个事件的时候，会产生一个包含事件相关信息的event事件对象

对于不同浏览器环境，这个event事件对象有一些差距

**但是`IE`中的事件对象，对应的属性名和方法名跟`DOM`中事件对象的名字有很大不一样**

* `cancelBubble ==  stopPropagation `**阻止事件冒泡，但是不是个方法是一个属性**
* `returnValue ==  preventDefault` **阻止默认事件,但是不是个方法，是一个属性**
* `srcElement == target`实际触发目标
* `type == type`用来区分事件类型，这个没有区别

**要记住的还是，如果在`IE`环境下，使用`DOM0`级指定事件处理程序的话，获取`event`对象需要从`window.event`这样获取**

例如：
```js
 var btn= document.getElementById('test')

 // DOM0级指定
 btn.onclick=function(){
     alert(window.event.target.srcElement === this) //true
 }

 // DOM2级
 btn.addEventListener('click',function(event){
     alert(event.srcElment === this) //true
 })
```

**还有就是`IE`环境下阻止事件冒泡和默认处理程序都是属性，不是方法，只需要把对应的属性设置为`false`**

例如：
```js
    var link = document..getElementById('test')
    link.onclick = function(){
        window.event.returnValue = false; //阻止默认事件
    }

```

**`IE`中的cancleBuble只是取消冒泡，因为IE环境不支持事件捕获，哈哈哈哈**

**然后就是完善一下之前的`EventUtil`，实现跨浏览器的获取事件对象，还有阻止冒泡和默认事件处理程序,代码如下**

```js
    getTarget(event){
        return event || window.event    //IE环境下可能是WINDOW.event
    },
    preventDefault(event){
        if(event.preventDefault){
            event.preventDefault()
        }else{
            event.returnValue = false   // IE环境下没有preventDefault，是通过设置returnValue取消默认
        }
    },
    stopPropagation(event){
        if(event.stopPropagation){
            event.stopPropagation()
        }else{
            event.cancelBuble = false
        }
    }
```

事件类型

DOM3级完善了事件类型，用来区分事件类型的不同信息，类似：鼠标事件，焦点事件，键盘事件，文本时间，滚轮事件等等

上一篇 下一篇

猜你喜欢

热点阅读