【API二】DOM事件基础

最新推荐文章于 2024-10-01 20:12:28 发布

乌拉拉城邦

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量78

点赞数

分类专栏： js日常笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_54806335/article/details/129909618

版权

js日常笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的事件监听，包括事件绑定的基本语法和事件类型的示例，如鼠标触发和文本事件。事件对象是回调函数的参数，提供了关于事件的详细信息。此外，还讨论了函数内部的环境对象`this`的指向以及回调函数的概念，强调了函数作为参数传递的情况。

摘要由CSDN通过智能技术生成

一.事件监听（绑定）

事件：编程时系统内发生的动作、事情（比如用户在网页上单击一个按钮）

事件监听（绑定事件、注册事件）：让程序检测是否有事情发生，一旦有事件触发，立即调用一个函数做出响应（比如鼠标经过，输入框变红）

语法：

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

//例如
const input = document.querySelector('input')
input.addEventListener('click', function(){
   alert('请输入')
})

事件监听三要素：事件源、事件类型、事件调用的函数

二.事件类型

鼠标触发：轮播图

焦点事件：表单，小米搜索框

文本事件：console.log(input.value) 得到内容

三.事件对象

3.1获取事件对象

事件对象：一个对象，里面有事件触发的相关信息（比如按下的是回车键），就是事件绑定的回调函数的第一个参数

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

3.2事件对象常用属性

<body>
	<input type="text" />
	<script>
		const input = document.querySelector('input')
		//e为事件对象，一般以e/event命名
		input.addEventListener('keyup', function(e){
			if(e.key === 'Enter'){  //回车键
				console.log('我按下了回车键')
			}
		})
	</script>
</body>

四.环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

谁调用this，this就是谁

<body>
	<button></button>
	<input type="text" />
	<script>
		//1.普通函数里的this指向window
		function fn(){ 
			console.log(this)
		}
		window.fn()
			
		//2.
		const btn = document.querySelector('button')
		btn.addEventListener('click', function(){
			console.log(this) //指向btn
		})
	</script>
</body>

五.回调函数

如果将函数A作为参数传递给函数B时，称函数A为回调函数。

回调函数本质还是函数，只不过把它当成参数使用，匿名函数作为回调函数比较常见

<body>
	<script>
	function fn(){
		console.log('我是回调函数')
	}
	//fn传递给了setInterval,fn就是回调函数
	setInterval(fn, 1000) //点击完之后，回头来调用
	</script>
</body>

乌拉拉城邦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录