【精简笔记】JavaScript进阶内容第二天

最新推荐文章于 2024-07-08 16:22:29 发布

阳光下的ABC

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量361

点赞数 11

分类专栏： JS 文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/2302_81331056/article/details/139963817

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

往期文章目录

【精简笔记】JavaScript基础内容第一天
 【精简笔记】JavaScript基础内容第二天
 【精简笔记】JavaScript基础内容第三天
 【精简笔记】JavaScript基础内容第四天
 【精简笔记】JavaScript基础内容第五天
 【精简笔记】JavaScript基础内容大总结
 【精简笔记】JavaScript进阶内容第一天

前言

本文主要讲述JS的核心用法，请读者确保已熟悉JS基础语法

一、事件监听

语法：

元素对象.addEventListener('事件类型'，要执行的函数）

举例：

<button>按钮</button>
<script>
const btn = documen.querySelector('.btn')
btn.addEventListener('click',function(){
	alert('点击了')
	})
</script>

二、事件类型

2.1 鼠标触发

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

2.2 表单获得光标

focus 获得焦点
blur 失去焦点
举例

<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('focus',function(){
console.log('获得焦点'）
}
input.addEventListener('blur',function(){
console.log('失去焦点'）
}
</script>
</body>

2.3 键盘事件、文本事件

<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keydown',function(){
	console.log('键盘按下了')
})
input.addEventListener('keyup',function(){
	console.log('键盘弹起了')
})
input.addEventListener('input',function(){
	consloe.log(input.value)
})
</script>
</body>

三、事件对象

3.1 什么是事件对象？

是一个对象，这个对象里有事件触发时的相关信息

3.2语法：

元素.addEventListener('click',function(e){
}

其中e就是事件对象

举例说明：

<body>
<button>点击</button>
<script>
	const btn = document.querySelector('button')
	btn.addEventListener('click',function(e){
		console.log(e)
	}
</script>
</body>

3.3部分常见的属性

type
获取当前的事件类型

clientX/clientY
获取光标相对于当前DOM元素左上角的位置

offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置

key
用户按下的键盘的值

四、环境对象

代表当前函数运行时所处的环境

<body>
<button>点击</button>
<script>
function fn(){
	console.log(this)//指向window
}
fn()



const btn = document.querySelector('button')
btn.addEventListener('click',function(){
	console.log(this)//指向btn
}
</script>
</body>

五、回调函数

说明:将函数A做为参数传递给函数B时，我们称函数A为回调函数