前端基础夯实--（JavaScript系列）DOM事件基础

最新推荐文章于 2021-06-05 09:58:26 发布

taopoppy

最新推荐文章于 2021-06-05 09:58:26 发布

阅读量179

点赞数 1

分类专栏：前端基础夯实文章标签： DOM事件基础 DOM鼠标事件 DOM 键盘事件

本文链接：https://blog.csdn.net/weixin_37968345/article/details/82425695

版权

1、javaScript事件基础

关于DOM事件的基础，我们将会去掌握一些基础的知识，什么是事件，HTML事件，DOM0级事件，常用的鼠标和键盘事件，还有this的指向问题。

2、什么是事件

1、事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。

3、HTML事件

1、HTML事件就是直接在html标签中添加事件来执行脚本，这种绑定事件的方法就是HTML事件。

2、HTML事件的语法：(1)功能：在HTML元素上绑定事件。（2）执行脚本可以是一个函数的调用（JS代码）

<tag 事件="执行脚本"></tag>

3、下面来写一段代码：

（1）首先在标签中的事件绑定，可以去调用函数，也可以直接写执行脚本。

（2）this指向的就是我们这个事件被绑定的这个DOM元素。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<style type="text/css">
			.btn{width: 140px;height: 30px;line-height: 30px;background: #00f;
				color: #ffffff;font-size: 14px;text-align: center;border-radius: 10px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<input type="button" value="弹出" onclick="alert('我是按钮')">
		<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
		<script>
			//鼠标滑过的时候调用的函数
			function mouseoverFn(btn){
				btn.style.background="#f00";
			}
			function mouseoutFn(btn){
				btn.style.background="#00f";
			}
		</script>
	</body>
</html>

4、DOM0级事件

1、给一个元素设置DOM0级事件的步骤有2个：（1）通过DOM获取HTML元素。（2）（获取HTML元素）.事件=执行脚本

特别注意：执行脚本可以是一个匿名函数，也可以是一个函数的调用（函数的调用千万不能加括号，如下面代码中的注释）。

2、为什么会有DOM0级事件，首先我们之前的HTML事件是给每一个HTML元素里都绑定事件，现在有一个列表，列表下面有很多项，假如都要给每一项添加事件，那就太麻烦了。

3、来看下面的代码：（每个属性只能绑定一个事件）

<!DOCTYPE html>
<html>
	<head>
		<title>

最低0.47元/天解锁文章

taopoppy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础夯实--（JavaScript系列）DOM事件基础

1、javaScript事件基础关于DOM事件的基础，我们将会去掌握一些基础的知识，什么是事件，HTML事件，DOM0级事件，常用的鼠标和键盘事件，还有this的指向问题。2、什么是事件1、事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。3、HTML事件1、HTML事件就是直接在html标签中添加事件来执行脚本，这种绑定事件的方法就是HTML事件。2、HTML事件的语...
复制链接

扫一扫