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以上的浏览器都不支持
其他浏览器都不支持
![](https://img2020.cnblogs.com/blog/1727725/202102/1727725-20210223134643264-1164362979.png)