HTML事件学习
2019-03-04 本文已影响0人
三人行大道
1.掌握什么是事件
2.HTML事件
3.DOM0级事件
4.常用的鼠标与键盘事件
5.this指向问题
在事件触发函数中，this是对该DOM对象的引用
>js与html之间的交互就是通过事件来实现的
HTML事件
语法 <tag 事件="执行的脚本"></tag>
功能：在HTML元素上绑定事件
说明：执行脚本可以是一个函数的调用
-onclick 鼠标点击时触发
-onmouseover：鼠标滑过时触发
-onmouseout：鼠标离开时触发
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')"> <!--绑定鼠标点击事件-->
<!--this是对DOM对象的一个引用, this放到哪里就想到于那个把那个DOM对象放到哪里去了-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div> <!--鼠标滑过按钮时调用mouseoverFn的函数-->
<script type="text/javascript">
function mouseoverFn(btn){
//鼠标划过按钮时，按钮的背景变为红色
console.log(btn);
btn.style.background = '#f00';
}
function mouseoutFn(btn){
console.log(btn);
btn.style.background="#00f";
}
</script>
</body>
<div id="dd" class="btn" onmouseover="mouseoverFn(this, '#f00')" onmouseout="mouseoutFn(this, '#00f')">结束</div> <!--鼠标滑过按钮时调用mouseoverFn的函数-->
<script>
function mouseoverFn(dd,bgColor){
//鼠标划过按钮时，按钮的背景变为红色
console.log(dd);
dd.style.background = bgColor;
}
function mouseoutFn(dd, bgColor){
console.log(dd);
dd.style.background= bgColor;
}
</script>
