js的基础为HTML与CSS，那么在实现对他们进行一些交互操作时我们首先要明白的是事情三要素
事件三要素：
1.事件源（你是要对什么东西进行操作）
2.事件（你要做什么实现所要的交互效果）
3.处理函数（在事件进行后你要目标变成什么样子）
案例：
下面小编举一个很简单的例子去根据事件三要素来进行操作（非常简明的一个例子那么我们只需要实现点击按钮去实现操作）：
对于像小编一样初学js的同学在之后实战中三要素有助于我们去理解去实际操作，
那么我们先分析该事件三要素
事件源：无非就是该盒子
事件：鼠标点击按钮
处理函数：按意愿去对盒子进行更改
同样我们看生活中实例1(京东站点一个广告栏条点击×会消失)：
那么同样事件具有三要素。我们以：事件源.事件=处理函数 实现js的交互效果。
那么小编先将自己那个盒子案例源代码附上：
<head>
<meta charset="UTF-8">
<title>JS小案例</title>
</head>
<style type="text/css">
.demo1{
width: 200px;
height: 200px;
background-color: red; //给盒子定义一个初始化状态
}
</style>
<body>
<div class="demo1" id="demo"></div>
<button id="btn">点击改变宽度</button>
<button id="btn1">点击改变背景颜色</button>
<script type="text/javascript">
var demo=document.getElementById("demo"); //以document的getid方法去获取对象
var btn=document.getElementById("btn");
var btn1=document.getElementById("btn1");
btn.onclick=function() {
demo.style.width="400px";
}
btn1.onclick=function () {
demo.style.backgroundColor="pink";
}
</script>
</body>
</html>对此介绍主要是了解js的实现给一个很直观的体验。
那么这边附上一个事件表（当然不是全部只是一些常用常见的）：
