事件机制

Written by with ♥ on in 前端

事件是用来处理响应的一个机制,这个响应可以来自于用户(点击、鼠标移动、滚动等), 也可以来自于浏览器。

自定义事件

Event 构造函数创建一个自定义事件对象。

new Event(typeArg[, eventInit]);

  • typeArg:字符串值,表示的事件名
  • eventInit:EvenInit 对象,包含三个可选参数:
    • bubbles:布尔值,表明事件是否冒泡,默认为 false
    • cancelable:布尔值,事件能否被取消,默认为 false
    • composed:布尔值,事件是否可以从 Shadow DOM 传递到一般的 DOM(一般用不到),默认为 false ```js var evt = new Event(“look”, {“bubbles”:true, “cancelable”:false}); document.dispatchEvent(evt);

// event can be dispatched from any element, not only the document myDiv.dispatchEvent(evt);


# 事件处理过程

![e](http://blog.kz3y.com/img/20190919153710.png)

# Event 方法

## 停止冒泡 stopPropagation and cancel Bubble

`event.stopPropagation()`

```js
<html>
    <body onclick="alert(`the bubbling doesn't reach here`)">
        <button onclick="event.stopPropagation()">Click me</button>
    </body>
</html>

stopImmediatePropagation

在一个元素的相同事件上绑定多个函数,会按照添加的顺序一个一个执行,如果在某个函数中执行 event.stopImmediatePropagation() 后续的函数不会继续执行。

捕获

绑定事件

addEventListener

// 常用例子, 给按钮添加一个点击的事件
// 1, 获得按钮
var loginButton = document.querySelector('#id-button-login')
// 2, 声明一个函数, 用于在按钮点击后执行
var clicked = function() {
    log('按钮被点击到了')
}
// 3, 添加事件, 使用 addEventListener 函数, 它有两个参数
// 第一个是事件的名字, 第二个是事件发生后会被自动调用的函数
loginButton.addEventListener('click', clicked)
//
// 添加完成, 可以自己在浏览器试试, 记得打开 console


// 给多个元素挂上同一个事件
// 选择多个元素使用函数 querySelectorAll
var buttons = document.querySelectorAll('.radio-button')
// 循环遍历每个元素, 并且绑定点击事件
for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i]
    button.addEventListener('click', function(event){
        // 注意, 这次我们直接定义了函数作为参数传递, 这样做是合法的
        // 另外, 我们增加了一个 event 参数
        // 浏览器会给事件响应函数传递一个参数, 它代表了事件本身
        // 我们可以用 event.target 取出响应事件的元素
        var self = event.target
        // clearActive 函数是我们自己定义的
        // 目的是删除其他元素的 active class
        clearActive()
        // add 可以增加一个 class
        self.classList.add('active')
    })
}

var clearActive = function() {
    var active = document.querySelector('.active')
    if (active != null) {
        // 使用 classList 可以访问一个元素的所有 class
        // remove 可以删除一个 class
        active.classList.remove("active")
    }
}

解绑事件

removeEventListener

手动触发自定义事件 Dispatching events

dispatchEvent()

在 dispatch 的过程中,如何冒泡,如何捕获?

Events

keydown

在焦点元素中按下某个按键会从该元素开始出发 keydown 事件。

例子: input 中按下回车修改表单数据。

<input onkeydown="enter()">

function enter(e) {
    const e = e || window.e;
    const currKey = e.keyCode
    if (currKey) == 13 {
        // ajax..
    }
}

beforeunload

页面关闭事件。

在页面关闭时,弹出窗口阻止。

function stop(e){
    var ev = e || window.event;
    ev.returnValue="离开将不能支付";
}

window.addEventListener('beforeunload',stop,false);

参考资料