DOM操作
Document Object Model 文档对象模型
BOM操作
Browser Object Model 浏览器对象模型
最常用事件
鼠标点击 onclick
鼠标经过 onmouseover
鼠标离开 onmouseout
鼠标双击 ondblclick
<script>
//定义一个函数
function dj(){
alert("点击");
}
</script>
<button onclick = "dj()">点击</button> //调用了函数
事件三要素
1.事件源：被触发对象
2.事件：用户的操作
3.事件处理程序：点击后要执行的代码
代码分离写法(外链式)
<button id="btn">点击</button>
<script src = "publick.js"></script>
外部文件代码 publick.js
window.onload = function(){ //加入入口函数可放在任意位置
var btn = document.getElementById("btn"); //获取事件源
//事件源.事件 = function(){代码块;}
btn.onclick = function(){ //匿名函数
alert("分离式写法");
}
}
需求：点击按钮修改内容
<input type="button" value="点击内容修改" id="btn">
<p id="p1">我是段落标签</p>
<script>
var btn = document.getElementById("btn"); //先获取事件源
btn.onclick = function(){
var p1 = document.getElementById("p1");
document.getElementById("p1").innerText = "修改了";
}
</script>
需求：点击切换图片
<style> //设置样式
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.box{
width: 750px;
height: 140px;
margin: 100px;
position: relative; //父标签给到相对定位
}
.box ul{
position: absolute; //子标签给到绝对定位
right: 10px;
bottom: 10px;
}
.box ul li{
width: 15px;
height: 15px;
line-height: 15px;
float: left;
background-color: pink;
margin: 5px;
cursor: pointer; //取消小手样式
}
</style>
<script>
function fun1(){ //根据id获取到pic再修改为其他图片
document.getElementById("pic").src="01.jpg";
}
function fun2(){ //根据id获取到pic再修改为其他图片
document.getElementById("pic").src="02.jpg";
}
</script>
<body>
<div class="box">
<img src="01.jpg" alt="" id="pic"> //展示01图片，同时命名为pic
<ul>
<li onclick="fun1()">1</li> //点击调用函数fun()1
<li onclick="fun2()">2</li> //点击调用函数fun()2
</ul>
</div>
</body>
