JavaScript即学即用教程[10]-DOM事件

, ,

绑定DOM事件的方式

直接在HTML标签中通过事件属性的方式添加。

1
<button onclick="test()">按钮</button>

在事件触发时，相当于会把onclick后方引号里面的内容封装为一个回调函数，作为代码进行调用。因此，在标签的双引号里面是需要执行 test() 这样的代码的，而不是单写一个test.同样，在双引号内部，有现成的 this 和 event 对象可以使用，分别代表当前dom元素和事件对象。

在回调函数test内部:

  • this并不指向触发事件的元素，而是指向window(严格模式应该是undefined)（如果需要，则请在html属性绑定时传递this给回调函数）
  • 第一个形参会传入当前event事件对象，或者在函数内部直接访问event也可以获得事件对象

动态绑定到元素对象属性的方式

1
2
var ele = document.querySelector('a')
a.onclick = function () {}

在回调函数内部:

  • this指向触发该事件的dom元素对象
  • 第一个形参会传入当前event事件对象，或者在函数内部直接访问event也可以获得事件对象

DOM2事件绑定方式

1
2
3
4
var ele = document.querySelector('a')
ele.addEventListener('click', test, false)
IE浏览器:
ele.attachEvent('onclick', test)

其test回调函数内部:

  • this指向触发该事件的dom元素对象
  • 第一个形参会传入当前event事件对象，或者在函数内部直接访问event也可以获得事件对象

addEventListenr还有第三个可选的参数useCapture，默认是false。

Boolean类型，是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。沿着DOM树向上冒泡的事件不会触发被指定为use capture（也就是设为true）的listener。

设置为true意味着他将在事件捕获阶段触发。

注意：在removeEventListener的时候，如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰

当然，如果当前对象就是目标对象本身时，添加的事件处理函数只在目标阶段起作用，第三个参数useCapture无效

冒泡和捕获

https://harttle.land/2015/07/31/javascript-event.html