JS基础入门篇（二十）—事件对象以及案例（二）
2024-09-02 12:15:16
案例一.点击按钮，选中input中的全部内容
select（）方法：选中全部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input,
button{
margin: 0;
padding: 0;
outline: none;
}
input{
width:200px;
height:40px;
border:1px solid black;
font-size: 20px;
}
button{
width: 300px;
line-height: 40px;
vertical-align: top;
}
</style>
</head>
<body>
<input type="text">
<button>点击此按钮选中input的全部内容</button>
<script>
var input=document.getElementsByTagName("input")[0];
var button=document.getElementsByTagName("button")[0];
button.onclick=function () {
input.select();
}
</script>
</body>
</html>案例二.点击按钮，选中input中的全部内容，并复制到粘贴板上。
document.execCommand("copy");//复制到粘贴板上。
<body>
<input type="text">
<button>点击此按钮选中input的全部内容</button>
<script>
var input=document.getElementsByTagName("input")[0];
var button=document.getElementsByTagName("button")[0];
button.onclick=function () {
input.select();//选中input的所有内容
document.execCommand("copy");//复制到粘贴板上
}
</script>
</body>事件对象
事件：当用户对页面进行操作的交互时，会触发对应元素的事件。
事件对象：
event
当发生事件，执行事件处理函数的时候，该时刻的详细信息。
注意：如果函数是直接调用的，则没有事件对象
注意：不同事件中的event对象可能有不同
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
// box.onmouseover = fn;//打印undefined
// box.onmousedown = fn;//打印undefined
document.onkeydown = fn;//打印按下的键值
// fn();//报错
function fn(){
// console.log( typeof event );
console.log( event.keyCode );
}
</script>
</body>
</html>案例三：模拟苹果电脑菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.wrap{
border:1px solid black;
position: absolute;
bottom:100px;
text-align: center;
width: 100%;
}
.wrap div{
width: 100px;
height: 100px;
background: cornflowerblue;
display: inline-block;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
var wrap=document.getElementsByClassName("wrap")[0];
var divs=wrap.getElementsByTagName("div");
document.onmousemove=function () {
for(var i=0;i<divs.length;i++){
calc( divs[i],event);
}
}
function calc( obj,mouseEvent ){
var objPos = {
//offsetLeft：相对于最近定位父级定位元素
x: obj.offsetLeft + 50,
//obj.getBoundingClientRect().top：距离文档顶部位置
y: obj.getBoundingClientRect().top + 50
}//元素中心点坐标
var mosPos = {
x: mouseEvent.clientX,
y: mouseEvent.clientY
}//鼠标所在位置
var dis = Math.sqrt( Math.pow( objPos.x-mosPos.x,2 ) + Math.pow( objPos.y-mosPos.y,2 ) );
var scale = 1;
//当鼠标离原点中心距离小于200时，则放大
if( dis < 200 ){
scale = (200 - dis) / 200 + 1;
}
obj.style.width = 100 * scale + "px";
obj.style.height = 100 * scale + "px";
}
</script>
</body>
</html>最新文章
- H3C ipsec ike 协商配置
- Android 渗透测试学习手册 翻译完成！
- Handler 原理分析和使用（二）
- JSON互转
- （Qt 翻译） QGLSceneNode
- 为代码减负之&lt;一&gt;触发器（SQL）
- JavaScript 作用域 匿名函数 模仿块级作用域（私有作用域）
- GSS4 - Can you answer these queries IV（线段树懒操作）
- ASP VNext 开源服务容错处理库Polly使用文档
- 开始在web中使用JS Modules
- fine-tuning 两阶段模型
- Wannafly挑战赛23 T2游戏 SG函数
- DApp demo之pet-shop
- python笔记12-字典
- GuavaCache学习笔记三：底层源码阅读
- linux 下设置定时任务
- 逻辑回归（logic regression）的分类梯度下降
- JavaScript 字符串用于存储和处理文本
- 并发修改异常（ConcurrentModificationException）
- SQL Server 学习博客分享列表（应用式学习 + 深入理解）