一、事件监听
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听</title></head><body><button class="btn">唐伯虎</button><script>// 需求： 点击button按钮，页面会弹出一个警示框，内容显示 '秋香'// 事件监听语法:// 元素对象.addEventListener('事件类型', 事件处理函数)// 1. 获取元素对象 button按钮const btn = document.querySelector('.btn')// 2. 事件监听 btn.addEventListener('click', function () {alert('秋香')})</script></body>
</html>
- 事件监听版本
- DOM0 事件，事件源.on事件类型 = function()
btn.onclick = function () {alert('我是弹窗1')
}
- DOM2事件，事件源.addEventListener(事件类型，事件处理函数)
btn.addEventListener('click', function () {console.log('我是回调函数')
})
- on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用
二、事件类型
- 鼠标事件
<body><div class="box"></div><script>// 鼠标事件类型const box = document.querySelector('.box')// 1. 鼠标点击box.addEventListener('click', function () {console.log('我点击了盒子')})// 2. 鼠标经过box.addEventListener('mouseenter', function () {console.log('我鼠标经过了盒子')})// 3. 鼠标离开box.addEventListener('mouseleave', function () {console.log('我鼠标离开了盒子')})</script>
</body>
- 焦点事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点事件</title><style>[type=text] {width: 245px;height: 50px;padding-left: 20px;border: 1px solid #ccc;font-size: 17px;outline: none;}</style></head><body><input type="text" class="search-text"><input type="text" class="search"><script>// 1. 焦点事件(手动触发)const search_text = document.querySelector('.search-text')// 1.1 获得焦点 focussearch_text.addEventListener('focus', function () {console.log('获得了焦点')})// 1.2 失去焦点 blursearch_text.addEventListener('blur', function () {console.log('失去了焦点')})// 2. 拓展 自动获得焦点 focus() 自动失去焦点 blur()// 2.1 语法: 元素.focus() 比如百度首页搜索框自动获得焦点const search = document.querySelector('.search')search.focus()</script></body></html>
- 键盘事件和 input事件
| 事件 | 触发时机 | 得到表单值 |
|---|---|---|
| keydown | 按下键盘时触发 | 不带最后一次按键值 ab |
| keyup | 弹起键盘时触发 | 输入内容 abc |
| input | 表单value发生变化时触发 | 输入内容 abc |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input事件和键盘事件</title><style>textarea {width: 300px;height: 30px;padding: 10px;border-color: transparent;outline: none;resize: none;background: #f5f5f5;border-radius: 4px;}</style>
</head><body><textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea><script>// 获取元素const tx = document.querySelector('#tx')// 1. 键盘事件 // 1.1 键盘按下事件 keydown 当我们按下键盘的时候就触发tx.addEventListener('keydown', function () {console.log('我是keydown事件' + tx.value)})// 1.2 键盘弹起事件 keyup 当我们键盘弹起的时候就触发tx.addEventListener('keyup', function () {console.log('我是keyup事件' + tx.value)})// 2. 用户输入事件 input ，是表单value的值发生变化的时候触发tx.addEventListener('input', function () {console.log('我是input事件' + tx.value)})// 3. 注意事项// 3.1 执行顺序 keydown → input → keyup// 3.2 keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容</script>
</body></html>//1. 执行顺序 keydown → input → keyup
//2. keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
二、事件对象
<body><div class="box"></div><textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea><script>// 事件对象const box = document.querySelector('.box')box.addEventListener('click', function (e) {console.log(e)})const tx = document.querySelector('#tx')tx.addEventListener('keyup', function (e) {// e 就是事件对象// console.log(e)// console.log(e.key) // a // 用户如果按下的是回车键，则弹出框提示按下了回车键if (e.key === 'Enter') {alert('您按下了回车键')}})</script>
</body>
三、环境对象
- 定义：指的是函数内部特殊的 this, 它指向一个对象，并且受当前环境影响
- 作用：弄清楚this的指向，可以让我们代码更简洁。函数的调用方式不同，this 指代的对象也不同；【谁调用， this 就是谁】 是判断 this 指向的粗略规则；直接调用函数，其实相当于是 window.函数，所以 this 指代 window
<body><button>点击</button><script>// 环境对象 this 粗略规则： 谁调用函数，this就指向谁// 1. 全局环境// console.log(this) // this 指向 window 全局对象// 2. 普通函数function fn() {console.log(this) // this 指向 window 全局对象}window.fn()// 3. 对象方法const obj = {uname: '佩奇',sing: function () {console.log(this) // this 指向 obj对象}}obj.sing()// 4. 事件const btn1 = document.querySelector('button')btn1.addEventListener('click', function () {// console.log(this) // this 指向 btn 这个对象// btn1.style.backgroundColor = 'pink'this.style.backgroundColor = 'pink'})</script>
</body>