DOM（学习笔记二）

1.事件监听

事件就是用户的某个行为，能够触发一个函数

DOM0级事件绑定（DOM02级事件绑定）

1) oDiv.onclick = function (){ // 事件监听
alert("本宝宝想吃苹果！！！");
}

2)oDiv.onclick = fn; // 不能加括号

function fn () {
alert("本宝宝想吃苹果！！！");
}

函数什么时候被执行？

1）显示去调用fn；

2）事件发生后可以执行函数

常见的事件

onclick // 单击

onmouseover // 鼠标悬浮

onmouseout // 鼠标离开

ondblclick // 鼠标双击

onfocus // 得到焦点

onblur // 失去焦点

onmouseup // 鼠标松开

onmousedown // 鼠标按下

2.事件三要素

1）事件源（谁身上发生了行为）

2）什么行为（比如单击鼠标，双击鼠标，鼠标放上去）

3）事件处理程序（行为发生后怎么处理）事件源.事件=事件处理（一般是函数）

<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: blue;
}
</style>

<div class="box" id="box1"></div>
<script type="text/javascript">
var oDiv = document.getElementById("box1");
oDiv.onclick = function (){ // 事件监听
alert("本宝宝想吃苹果！！！");
}

oDiv.onmouseover = function () {
oDiv.style.backgroundColor = 'red';
}
oDiv.onmouseout = function () {
oDiv.style.backgroundColor = 'blue';
}
</script>

由于js从上往下一遍解析一边执行，所以执行函数位于文档结构之前，可能获取不到元素对象，为了防止页面崩溃，将用到onload事件，在文档加载之后再执行函数，可以获取到页面上的元素id。

window.onload = function () {} // 文档加载完执行函数（延迟加载）

作业：1.上下左右...八个方向移动图片

2.调节背景颜色（用户点击+-,或者输入RGB值）

作业2参照下面链接： https://my.osc 3ff0
hina.net/u/3785555/blog/1794591

复习

1.找元素

2.更改html属性

点语法 oDiv.style.fontSize // css的语法在js中变成驼峰式

setAttribute()..,getAtttribute().. // 自定义属性也可以

3.更改css样式

oDiv.style.fontSize = '40px';

4.事件（监听）

window.onload = function(){} // 文档（html页面）加载完之后，执行的函数