事件初级
一 概念
- onload：页面加载完毕事件，只附属于window对象
- onclick：鼠标点击时间
- onmouseover：鼠标悬浮事件
- onmouseout：鼠标移开事件
- onfocus：表单元素获取焦点
- onblur：表单元素失去焦点二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件初级</title>
<script type="text/javascript">
// 事件需要绑定具体执行函数(方法)
// 通过事件满足的条件触发绑定的函数(方法)
// 函数(方法)完成具体的功能
// onload事件附属于window
// onload触发条件:页面加载完毕(DOM文档树及页面资源)
// 行间式方式可以书写在body标签
window.onload = function () {
div.style.color = 'red';
}
</script>
</head>
<body>
事件初级
<div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div>
<!-- 1.直接将js代码块书写在行间事件中, 不提倡 -->
<!-- 2.行间事件调用函数, 不提倡(比较直接) -->
</body>
<script type="text/javascript">
var overAction = function () {
div.style.color = 'blue';
}
// 3.为目的对象绑定事件方法,内部可以使用this关键词
// this就是绑定的对象本身
div.onmouseout = function () {
this.style.color = 'pink';
}
</script>
</html>
