学会为DOM注册事件 实现简单的可交互的网页特效
事件
首先要明白什么是事件? 其实事件就是我们在编程时系统内发生的动作或者发生的事情; 比如用户在网页上进行鼠标移入或者移出或者单击了某个链接,这都是事件。
事件包含了事件监听, 事件类型, 事件对象, 环境对象等
事件监听
事件监听就是自动让程序去监测是否有事件发生, 一旦监测到, 就立即调用一个函数进行响应, 这个过程也叫绑定事件或者注册事件, 比如鼠标经过可以让轮播图停止等。
语法1：
元素对象.addEventListener('事件类型', 要执行的函数)
语法2：
事件源.on事件 = function() { }
语法2是低版本的写法 缺点是on方式会被覆盖, addEventListener方式可绑定多次, 拥有事件更多特性, 推荐使用。
通过语法我们能够很直观的看到事件监听有三个比较关键的要素。元素对象, 事件类型, 和要执行的函数
-
元素对象: 即事件源, 通俗来说就是被触发的DOM元素。
-
事件类型: 通过什么方式触发的？鼠标移入移出等。
-
要执行的函数: 事件触发后, 相应的回调函数被执行。
事件类型有很多种
鼠标事件: 鼠标触发
鼠标点击: click
鼠标移入: mousenter
鼠标移出: mouseleave
焦点事件: 表单获得光标后触发
获得焦点: focus
失去焦点: blur
键盘事件: 键盘触发
键盘按下: keydown
键盘抬起: keyup
文本事件: 表单输入触发
input: 用户输入事件
事件对象
通俗来说: 当任意一个事件类型被触发时, 与事件相关的信息会以对象的形式被记录下来, 这个对象被称为事件对象。
语法: 元素.addEventListener('click', function (e) {})
事件监听里的回调函数的第一个参数就是事件对象, 通常命名为event、ev、e。
事件对象的常用属性
<script>
document.addEventListener('click', function (e) {
console.log(e.type); // 打印事件类型 click
console.log(e.clientX); // 基于浏览器的左上角 打印鼠标点击的X坐标 Y坐标同理
console.log(e.offsetX); // 基于当前元素的左上角 打印鼠标点击的X坐标 Y坐标同理
})
</script>
环境对象this
环境对象this是指函数内部特殊的变量, 它代表着当前函数运行时所处的环境。
通俗来说 this本质上也是一个变量, 其数据类型是对象。
在使用时, 我们可以简单采用谁调用, this就是谁的粗略规则。
普通函数里, this指向的是window。
function fn() {
console.log(this)
}
window.fn()
运行结果：
在如下的点击事件中: 回调函数也是个函数 只要是函数, 里面都有this, 谁调用this指向谁, 而回调函数是button在调用, 所以this指向button这个对象。
<body>
<button>点击</button>
<script>
//每个函数里面都有this 环境对象
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log(this) // btn 对象 即button这个对象
btn.style.color = 'red'
this.style.color = 'red'
})
</script>
</body>
扩展知识: 回调函数
通俗说就是把函数1当做参数传递给函数2, 我们就把函数1称为回调函数。使用匿名函数作为回调函数比较常见。
<script>
// 开启定时器，匿名函数做为参数
setInterval(function () {
console.log('回调函数就是我呀...');
}, 1000);
</script>
回调函数本质上是函数, 只不过把她当参数使用而已。
