浏览器事件

[Yolo-0317]

事件

事件流

• 事件冒泡 IE
• 事件捕获

所有的现代浏览器都支持事件冒泡，建议事件冒泡---《js高程》

事件处理程序

1. HTML事件处理程序

行内
<input type="button" onclick="alert('onclick')" />

外部脚本
<script>
    function showMessage() {
        console.log('clicked')
    }
</script>
<input type="button" onclick="showMessage()" />

代码中，showMessage函数会获得有一个局部变量event，即事件对象，函数内部this指向事件的目标元素，即代码中input

2. DOM0级事件处理程序
   简单、跨浏览器兼容

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

this指向当前元素--myBtn，通过this可以访问元素任意的属性和方法

3. DOM2级事件处理程序

• addEventListener —— 添加事件处理程序
• removeEventListener —— 删除事件处理程序

所有的DOM节点都适用这两个方法，都接受三个参数：要处理的事件名、事件处理函数、布尔值。
最后的布尔值如果为true，则用于事件捕获；false则用于事件冒泡

优点是可以为一个元素添加多个事件处理程序

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

如果addEventListener第二个参数使用的是匿名函数，则不能使用removeEventListener将其清除；

IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序。
---- JavaScript高级程序设计

4. IE事件处理程序

• attachEvent
• detachEvent

接受两个参数：要处理的事件名、事件处理函数

IE事件处理程序与DOM0级区别是this指向不同：attachEvent中的事件处理函数在全局作用域执行，this指向window；DOM0级的中的事件处理函数中this指向元素

事件对象

1. DOM中的事件对象
   stopPropagation方法用于阻止事件冒泡和捕获

事件相关的内存和性能

1. 事件委托

利用==事件冒泡==，用于解决“事件处理程序过多”的问题；常用于子节点是动态生成的，那么将处理子节点的事件注册到父节点上。

节省内存；不需要给子节点注销事件

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。
---- JavaScript高级程序设计（第3版）

2. 移除事件处理程序