JS事件

🥝事件的相关术语

事件类型： 鼠标事件、键盘事件
事件名称： click、dbclick等
事件目标： 表示与发生事件相关的目标对象
事件处理程序： 指处理事件的函数，即发生事件时需调用的函数

🥝事件的类型

事件分为 注册事件 和 注销事件。
注册事件的方法有两种：1⃣️属性注册 2⃣️方法注册

🥝属性注册

1⃣️ 设置HTML元素属性为事件处理程序
语法：

<button onclick="sayhello()">点击</button>

2⃣️通过JS设置元素对象的属性为事件处理程序
语法：

document.body.onclick = function(e) {
    alert(1);
}

🌈 属性注册具有唯一性，后面的属性注册会覆盖前面的。

🥝方法注册

        addEventListener(eventName, eventHandler, |useCapture)

1⃣️ eventName {string} 所注册的事件名称，不区分大小写，如注册鼠标点击事件写为click。
2⃣️ eventHandler {function | function object} 函数或函数对象，事件触发时所需执行的函数。
3⃣️ |useCapture {boolean} 可选：是否处于捕获阶段执行，默认为false。

🌈 addEventListener()方法能为同一对象同一方法注册多次，当发生此事件时，注册的处理事件程序将按照注册先后顺序执行。
IE9之前的IE不支持此方法，可使用attachEvent()代替。
若使用相同的事件处理程序对象多次注册在同一事件上，只算注册一次。

          attachEvent(eventName, eventHandler)

1⃣️ eventName {string} 所要注册的事件名称，例如onclick，onload
2⃣️ eventHandler {function | function object} 函数或者函数对象；当使用函数对象多次注册同一事件时，可注册多次。
例如：

function say(){
    console.log('1');
}
document.body.attachEvent('onclick',say);
document.body.attachEvent('onclick',say); // say第二次注册同一事件
 
document.body.click(); // => 1 1 ：输出了2次say函数

🥝JQuery中的事件注册

JQuery中的事件注册方式对多浏览器的差异性进行了解决。
判断元素是否含有addEventListener()或attachEvent()

function add(element,type, eventHandle){
    if (element.addEventListener) {
        element.addEventListener(type, eventHandle, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, eventHandle);
    }
}

🥝注销事件

可以注册的事件，相应的也可以注销元素的事件。
removeEventListener()注销addEventListener()
detachEvent()对应于attachEvent()

🥝removeEventListener(eventName, eventHandlerObj)

eventName {string} ：字符串，所要注销的事件名称。不需要加前缀“on”。
eventHandlerObj {function Object} ：函数对象。传入一个函数体是没有效果的。

🥝detachEvent(eventName, eventHandlerObj）

eventName {string} ：所要注销的事件名称，以"on"开头，后面跟着事件名称。
eventHandlerObj {function Object} ：函数对象。传入一个函数体是没有效果的。

🥝多次注册与多次注销

因为attachEvent()可以把一个函数对象多次注册到元素同一个事件上，所以调用一次detachEvent()只能注销掉一次。

function sayHello() {
    console.log('1');
}
document.body.attachEvent('onclick', sayHello);
document.body.attachEvent('onclick', sayHello); // 注册了2次
 
document.body.click(); // => 1 1：输出2次
 
document.body.detachEvent('onclick', sayHello); // 注销1次
 
document.body.click(); // => 1 ：输出结果为1，只注销了1次

🥝取消事件

给对象的事件属性赋值为null，可取消此事件的所有注册过的处理事件程序。

document.body.addEventListener('onclick', function(e){
    console.log(1);
});
document.body.addEventListener('onclick', function(e){
    console.log(2);
});
 
document.body.onclick=null; // onclick属性赋值为null，相当于注销了onclick事件
 
document.body.click(); // 无操作