导航

术语

绑定事件：绑定事件的处理函数
- 事件是原本就存在的，不需要绑定，其实是在绑定事件触发后的要处理的函数
事件 + 事件的反馈 = 前端交互

事件句柄

句柄：onclick
事件句柄：div.onclick = function() {}

所谓的事件句柄就是一个将元素的特定事件与某个函数关联起来，比如 onclick、onmouseover 等都是事件句柄，它们会指向一个给定的函数，也就是事件发生时要执行的操作。例如：

div.onclick = function() {
	// todo...
}

// 👆🏻 整体叫做 事件句柄，其中 onclick 单独拆出来叫 句柄
// 通常说的 事件句柄的绑定形式 就是上面这种形式

事件源

事件作用在谁身上，谁就是事件源。

比如网页元素中 a 标签有 onclick 事件，当点击 a 发生 onclick 事件时，事件源就是 a 标签。

绑定事件处理函数

1. HTML 中直接绑定 - 内联 / 行内事件监听器

<div onclick="test()" onmouseover="test2()"></div>

2. JS 中获取 DOM 元素后绑定

div.onclick = function() {};

同时绑定多个处理函数，后边的会覆盖前面的

div.onclick = function() { console.log(1); };
div.onclick = function() { console.log(2); };

// 只会打印 2

<div onclick="console.log(1)">点击我</div>
<script>
  div.onclick = function() { console.log(2); };
  
  // 只会打印 2
</script>

3. addEventListener(事件类型, 事件处理函数, useCapture) 事件监听器

IE9以下不兼容，W3C规范
同一元素可以绑定多个事件，彼此不会覆盖
捕获阶段 or 冒泡阶段执行
- true - 事件句柄在捕获阶段执行（即在事件捕获阶段调用处理函数）
- false（默认）- 事件句柄在冒泡阶段执行（即表示在事件冒泡的阶段调用事件处理函数）
- 默认第三个参数不写的话，是按照事件句柄在冒泡执行的

oBtn.addEventListener('click', function() {
    this.innerHTML = '加载中..';
}, false);
oBtn.addEventListener('click', function() {
    console.log('加载更多事件');
}, false);
// 2个绑定都会执行

oBtn.addEventListener('click', test, false);
oBtn.addEventListener('click', test, false);
function test() {
    console.log(1);
}
// 只会执行一次打印，因为绑定的是同一个函数引用

4. attachEvent (事件类型，事件处理函数)

IE8 及以下
this 指向 window
与 addEventListener 不同，绑定同一引用值的函数，绑定几次执行几次

oBtn.attachEvent('onclick', function() {
    test.call(oBtn);
})
function test() {} // 解决 attachEvent 中 this 指向问题

oBtn.attachEvent('onclick', test, false);
oBtn.attachEvent('onclick', test, false);
function test() {
    console.log(1);
}
// 执行两次打印

⭐️ this 指向与事件绑定

html 中直接绑定

<div class="container" onclick="handleClick()">Click Me</div>
<!-- onclick 必须加 () -->

<script>
function handleClick(e) {
  console.log(this, e); // window, undefined
}
</script>

<div class="container" onclick="console.log(this)">Click Me</div>

<script>
// 这个时候 this 是 div.container
</script>

<div class="container" onclick="handleClick.call(this, event)">Click Me</div>

<script>
function handleClick(e) {
  console.log(this, e); // div.container, event
}
</script>

js 通过 on 绑定

<div class="container"></div>
<script>
const container = document.getElementsByClassName('container')[0];
container.onclick = function(e) {
  console.log(this, e); // div.container, event
}
</script>

addEventListener

<div class="container"></div>
<script>
const container = document.getElementsByClassName('container')[0];
container.addEventListener('click', function(e) {
  console.log(this, e); // div.container, evet
});
</script>

⭐️ 封装事件处理函数

function addEvent(el, type, fn) {
	if (el.addEventListener) {
  	el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {
  	el.attachEvent('on' + type, function() {
    	fn.call(el);
    });
  } else {
  	el['on' + type] = fn;
  }
}

解除事件绑定

elem.onclick = null; 、elem.onclick = false;
elem.removeEventListener(参数需要和绑定时候的参数完全相同)

oBtn.addEventListener('click', test, false);
oBtn.addEventListener('click', test, false);

// 函数提出来
function test() {
	this.className = '';
  this.innerHTML = '';
  this.removeEventListener('click', test, false);
}

// 给匿名函数起名字
oBtn.addEventListener('click', function test() {
	this.className = '';
  this.innerHTML = '';
  this.removeEventListener('click', test, false);
})

// 非严格模式下
oBtn.addEventListener('click', function() {
	this.className = '';
  this.innerHTML = '';
  this.removeEventListener('click', arguments.callee, false);
})

elem.detachEvent(type, fn)
- elem.detachEvent('onclick', test);