JavaScript -- 事件

迷南。 2022-06-11 08:54 231阅读 0赞

# 事件处理程序 #

## HTML事件处理程序 ##

或者

缺点：HTML和JS紧密耦合。

## DOM0级事件处理程序 ##

var btn = document.getElementById("myBtn");
    btn.onclick = function(){ 
        alert("Clicked");
        alert(this.id);    //"myBtn"
    };
    
    btn.onclick = null; // 删除事件处理程序

## DOM2级事件处理程序 ##

addEventListener() & removeEventListener()

这两个函数都接受3个参数：  
要处理的事件名，作为事件处理程序的函数，一个布尔值（true表示在捕获阶段处理事件，false表示在冒泡阶段调用事件处理程序）。

var bin = document.getElementById("myBtn");
    btn.addEventListener('click', function(){ 
        alert(this.id);
    }, false);

使用DOM2的好处是可以添加多个事件处理程序。

通过removeEventListener可以移除事件处理函数，这也就意味着，像上文那样添加的匿名函数将无法移除。

## IE事件处理程序 ##

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

var btn = document.getElementById("myBtn");
    btn.attachEvent("onclick", function(){ 
        alert("Clicked");
    });

注意：在attachEvent方法中，this等于window。

# 事件对象 #

事件对象的属性／方法一览  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

只有在事件处理程序执行期间，event对象才会存在。

# 模拟事件 #

事件经常由用户操作或者通过其他浏览器功能来出发，但是其实也可以使用JS在任意时刻来出发特定的事件。

## DOM中的事件模拟 ##

可以在document对象上使用createEvent方法创建event对象，这个方法接收一个参数：即表示要创建的事件类型的字符串。这个字符串可以是：  
UIEvents：一般化的UI事件  
MouseEvents：一般化的鼠标事件  
MutationEvents：一般化的DOM变动事件  
HTMLEvents：一般化的HTML事件

模拟事件的最后一步就是触发事件，使用方法：dispatchEvent。调用该方法时，需要传入一个参数，即表示要触发事件的event对象。

### 模拟鼠标事件 ###

var btn = document.getElementById("myBtn");
    // 创建事件对象
    var event = document.createEvent("MouseEvents");
    // 初始化事件对象
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
    // 触发事件
    btn.dispatchEvent(event);

### 模拟其他事件 ###

var event = document.createEvent("HTMLEvents");
    event.initEvent("focus", true, false);
    target.dispatchEvent(event);

### 自定义DOM事件 ###

自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。

## IE事件模拟 ##

var textbox = document.getElementById("myTextbox");
    
    var event = document.createEventObject();
    
    event.altKey = false; 
    event.ctrlKey = false; 
    event.shiftKey = false; 
    event.keyCode = 65;
    
    textbox.fireEvent("onkeypress", event);

[SouthEast]: /images/20220611/d9d7e03dd0714a59a4eeffa124f8898a.png
[SouthEast 1]: /images/20220611/b99719e54fe1421886ae209940e728ad.png