事件
JavaScript 使我们有能力创建**动态页面*
*。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素**都可以产生某些可以触发 JavaScript 函数的事件
**。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
注意:事件通常与函数配合使用,当事件发生时函数才会执行
点击事件
: onclick , ondbclick
焦点
: onfocus , onblur
鼠标
:onmouseout , onmouseover , onmouseup , onmousemove , onmousedown
键盘
: onkeydown , onkeypress , onkeyup
body中
: onload , onunload , onerror , onresize
<body>
<script type="text/javascript">
function fun1(){
console.log("被点击了....");
}
function fun2(){
console.log('被双击了....');
}
function fun3(o){
//console.log('1');
// #RRGGBB
var r1 = parseInt(Math.random()*10);
var r2 = parseInt(Math.random()*10);
var r3 = parseInt(Math.random()*10);
var r4 = parseInt(Math.random()*10);
var r5 = parseInt(Math.random()*10);
var r6 = parseInt(Math.random()*10);
var rgb = ""+r1+r2+r3+r4+r5+r6;
// console.log(rgb);
o.style.backgroundColor='#'+rgb;
}
</script>
<!--事件属性中 不用加 JavaScript:前缀 -->
点击事件:<br>
<input type="button" value="点击事件" οnclick="alert('被点击了。。。')">
<input type="button" value="点击事件" οnclick="fun1();">
<input type="button" value="双击事件" οndblclick="fun2();"><br>
焦点事件:<br>
用户名:<input type="text" onfocus="console.log('获取焦点1')" οnblur="console.log('失去焦点1')"><br>
地址:<input type="text" onfocus="console.log('获取焦点2')" οnblur="console.log('失去焦点2')"><br>
用户名:<input type="text" value="a" onfocus="this.value='获取焦点'" οnblur="this.value='失去焦点'"><br>
地址:<input type="text" onfocus="this.value='获取焦点'" οnblur="this.value='失去焦点'"><br>
键盘事件:<br>
用户名 onkeyup:<input type="text" onkeyup="console.log(event.keyCode);" ><br>
<!--
onkeydown和onkeypress的区别:
1.onkeypress 火狐浏览器并不支持
2.onkeypress只对常用操作按键有用
onkeydown对所有按键都有作用【除了 截图】
-->
用户名 onkeydown:<input type="text" onkeydown="console.log(event.keyCode);" ><br>
用户名 onkeypress:<input type="text" onkeypress="console.log(event.keyCode);"><br>
鼠标事件:<br>
<!-- js中的样式 属性名称按照 驼峰命名法 backgroudn-color backgroundColor -->
<div style="border: 1px red solid;width: 200px; height: 200px"
onmouseover="this.style.backgroundColor='#123456';"
onmouseout="this.style.background='#654321'">
</div>
<div style="border: 1px red solid;width: 200px; height: 200px"
onmouseup="this.style.width='100px'"
onmousedown="this.style.width='300px'">
</div>
<div style="border: 1px red solid;width: 200px; height: 200px"
onmousemove="fun3(this);">
</div><br>
</body>
----------
<script type="text/javascript">
function init(){
console.log('页面加载完成...');
}
</script>
<body onload="init();" onresize="console.log('----------')">
<!---
body事件:
onload:在页面元素全都加载完成后执行
-->
<script type="text/javascript">
console.log('1');
</script>
<a href="#">aaaa</a>
<script type="text/javascript">
console.log('2');
</script>
</body>