JavaScript中常见的事件用法小结（js数据类型转换方法）难以置信

94 0 0

案例：点击按钮弹框

<body>
<input type=”button” value=”按钮” id=”btn”>
<script>
document.getElementById(“btn”).onclick=function () {
alert(“点击了”);
};
</script>
</body>

案例：鼠标进入红色，离开蓝色（放上去就可以，不用点击）

<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id=”dv”></div>
<script>
document.getElementById(“dv”).onmouseover=function () {
document.getElementById(“dv”).style.backgroundColor=”red”;
};
document.getElementById(“dv”).onmouseout=function () {
document.getElementById(“dv”).style.backgroundColor=””;
};
</script>
</body>

案例：文本框

<body>
<input type=”text” value=”请输入内容” id=”te”>
<script>
document.getElementById(“te”).onfocus=function () {
document.getElementById(“te”).value=””;
};
document.getElementById(“te”).onblur=function () {
document.getElementById(“te”).value=”请输入内容”;
};
</script>
</body>

鼠标移动的时候就会触发

案例：div 跟着鼠标移动

<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div id=”dv”></div>
<script>
document.onmousemove=function (e) {
//鼠标相对于页面的可视区域的横坐标
var x=e.clientX;
//鼠标相对于页面的可视区域的纵坐标
var y=e.clientY;
//div对象
var dvobj=document.getElementById(“dv”);
//设置div的横坐标
dvobj.style.left=x + “px”;
//设置div的纵坐标
dvobj.style.top=y + “px”;
};
</script>
</body>

当拖动滚动条的时候就会触发

<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div id=”dv”>
码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
</div>
<script>
document.getElementById(“dv”).onscroll=function () {
console.log(“滚动条被拖动了”);
};
</script>
</body>

当键盘按下或者抬起任意按键的时候触发

<body>
<input type=”text” id=”txt”>
<script>
document.getElementById(“txt”).onkeydown=function () {
console.log(“键盘按下了”);
};
document.getElementById(“txt”).onkeyup=function () {
console.log(“键盘抬起了”);
};
</script>
</body>

当鼠标左键或右键按下或者抬起的时候触发

按下或抬起滚动轮也会触发，滑动滚动轮不能触发

如果鼠标比较高级，有其他按键的情况下，按下或抬起也会触发

<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id=”dv”></div>
<script>
document.getElementById(“dv”).onmousedown=function () {
console.log(“鼠标按下了”);
};
document.getElementById(“dv”).onmouseup=function () {
console.log(“鼠标抬起了”);
};
</script>
</body>

本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途

到此这篇关于JavaScript中常见的事件用法小结的文章就介绍到这了,更多相关js事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:js中的鼠标事件有哪些（用法示例学习进阶）js常用的键盘事件有哪些(用法示例)_键码keyCode对照表JavaScript?键盘事件的处理及属性详解javascript 组合按键事件监听实现代码js捕捉键盘事件和按键键值的方法js鼠标按键事件和键盘按键事件用法实例汇总Atitit.js的键盘按键事件捆绑and事件调度JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)JavaScript onkeydown事件入门实例(键盘某个按键被按下)js 事件截取enter按键页面提交事件示例代码javascript 按键事件(兼容各浏览器)js获取键盘按键响应事件(兼容各浏览器)JavaScript 监听textarea中按键事件

# 随心笔谈