JS 03事件
程序员文章站
2022-03-20 19:12:52
onclick单机事件 ondblick双击事件 onfocus成为焦点，onblur失去焦点 onchange选中对象的值发生变化 onload页面装载 onmousemove鼠标移动 onmouseeout 出去 onmousewheel滑动滚轮 onkeydown按键盘 ......
1 <script type="text/javascript">
2
3 function getuserinput() {
4 //获取用户输入的内容
5 var val = document.getelementbyid("userinput").value
6 //根据用户输入的内容播放相应的动画
7 playanimate(val);
8 }
9 function playanimate(str){
10 if(str=="黑洞"){
11 alert("播放反转的动画")
12 }else if(str=="反转"){
13 alert("播放反转动画");
14 }
15 }
16 </script>
17 <body>
18 <input id="userinput" type="text"/>
19 <input type="button" value="百度一下" onclick="getuserinput();">
20
21 </body>
onclick单机事件
1 //一个事件可以触发多个函数
2 function test1() {
3 //单击事件onclick：常用html标签是button标签、a标签、img标签
4 alert('nihao')
5 }
6 function test2() {
7 alert("世界");
8 }
9 <button type="button" onclick="test();">点我测试</button>
10 <a href="javascript:void(0);" onclick="test1();test2();">点我测试2</a>
ondblick双击事件
1 //一个html元素可以绑定多个事件
2 function testdouble() {
3 //双击事件ondblclick：常用html标签是button标签、a标签、img标签
4 alert("我被双击了！")
5 }
6 <input type="button" value="点我测试双击" ondblclick="testdouble()">
7 <button type="button" ondblclick="testdouble();">点我测试双击</button>
onfocus成为焦点，onblur失去焦点
function testfocus() {
//获取焦点事件onfocus：常用的html标签有<input type="text">
console.log("万众瞩目");
}
function testonblur(){
//丢失焦点事件onblur: 常用的html标签有<input type="text">
console.log("无人问津")
}
<input type="text" onfocus="testfocus();" onblur="testonblur()"/>
onchange选中对象的值发生变化
function testonchange() {
//html的value发生变化的事件：常用html标签有select
console.log("用户重新选择了城市")
}
<select onchange="testonchange()">
<option value="1">广州</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select>
<input type="text" onchange="testonchange()"/>
onload页面装载
function testonload() {
//页面加载事件：常用的html标签是body
console.log("页面加载...")
}
<body onload="testonload()">
onmousemove鼠标移动
<style type="text/css">
#mydiv {
width: 300px;
height: 500px;
border: 1px solid grey;
background-image: url("timg.jpg");
}
</style>
<script type="text/javascript">
function fj(eve) {
var e = window.event || eve;
var x = e.pagex || e.x;
var y = e.pagey || e.y;
console.log(x + "--" + y);
}
</script>
<div id='mydiv' onmousemove="fj(event);"> </div>
onmouseeout 出去
onmousewheel滑动滚轮
onkeydown按键盘
上一篇： 实现一个div的拖拽效果
下一篇： 【篇一】Python安装与初识