<head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; cursor: pointer; } .aaa { background-color: red; } </style></head><body>
<div id="box"></div>
<script> //JS是以事件驱动为核心的一门语言 //事件3要素：事件源、事件、事件处理(驱动)程序 //1,事件源：引发后续事件的标签 //2,事件：（js定义好的） //3,事件驱动程序：对样式和html的操作（DOM操作)
//体验事件 //需求：点击盒子 alert("1"); //步骤1：获取事件源// var arr = document.getElementsByClassName("");// var arr1 = document.getElementsByName("");// var div = document.getElementById(""); //步骤2：绑定事件 匿名绑定（事件源.事件 = function(){事件驱动程序} ) //也可以带函数名绑定 div.onclick = fn;不要带括号 //还有行内绑定 <div id = "box",onclick = fn()> 写括号 //3：书写事件驱动程序 也可以操作标签属性和样式
var div = document.getElementById("box"); div.onclick = function (){// alert("1");// div.className = "aaa"; div.style.width = "200px"; div.style.height = "200px"; div.style.backgroundColor = "red"; }
</script>
时间： 2024-10-24 21:53:56