event_1：事件注册

名词解释

侦听器：事件处理程序

事件基础

1）什么是事件

// 给元素添加事件，称为注册事件或者绑定事件。

// 有两种方式：传统方式 和 方法监听方式

2）事件三要素

事件源  事件类型  事件处理程序
// 1 获取事件源
// 2 注册事件（ 绑定事件 ）
// 3 添加事件梳理程序 ( 采用函数赋值形式 )

一  传统方式 [ 注册事件的唯一性 ]

// 1 利用on开头的事件  onclick
// . <button onclick = "alert('警示框')"></button>
// . btn.onclick = function(){}

特点：注册事件的唯一性
唯一性：
同一个元素同一个事件只能设置一个处理函数
最后注册的处理函数会覆盖掉前面注册的函数

代码范例

<button>按钮</button>
<button>按钮</button>
<script>
    var btns = document.querySelectorAll('button');
    btns[0].onclick = function () {
        alert('hai');
    }
    btns[0].onclick = function () {
        alert('你好');
    }
    //现在点击 弹出 你好
    //第二个处理函数覆盖了第一个处理函数
</script> 

二  事件监听方式 addEventListener();

1）概念

// . w3c标准推荐方式 
// . addEventListener(); 它是一个方法
// . ie9以前不支持 可以用 attachEvent()代替
// . 同一个元素同一个事件 可以注册多个监听器
// . 按注册顺序依次执行

2）基本语法

eventTarget.addEventListener(type, listener [,useCapture]);

// type  表示监听事件类型的字符串

// listener 事件处理函数  事件发生时,会调用该监听函数

// useCapture 布尔类型的可选参数  默认是false

3）代码范例

<button>按钮</button>
<script>
    var btns = document.querySelectorAll('button');
    btns[0].addEventListener('click', function () {
        alert('22');
    })
    btns[0].addEventListener('click', function () {
        alert('33');
    })
    // 先弹出 22 然后弹出 33
    // 同一个元素 同一个事件 2个处理函数都执行了
</script>

----------------------------------------------- 只做了解 ----------------------------------------------------------

attachEvent 事件监听方式

<button>按钮</button>
<script>
    var btns = document.querySelectorAll('button');
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script> 
ie9以前的浏览器才支持
ie9以上的浏览器都不支持
其他浏览器都不支持