JS基础入门篇（二十）—事件对象以及案例（二）

案例一.点击按钮，选中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;//打印undefineddocument.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>

JS基础入门篇（二十）—事件对象以及案例（二）相关推荐

JS基础入门篇（四十三）—ES6（二）
1.对象简洁表示法原来写法 var name = "lzf";var gender = "male";var fn = function(){console. ...
JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
1.this的使用 thisjs中的关键字js内部已经定义好了,可以不声明直接使用 this的指向问题1. 在函数外部使用this指向的是window2. 在函数内部使用有名函数直接调用函数 thi ...
JS基础入门篇（三）— for循环，取余，取整。
1.for循环 1.for的基本简介作用:根据一定的条件,重复地执行一行或多行代码语法:for( 初始化 ; 判断条件 ; 条件改变 ){代码块} 2.for循环的执行顺序 <body> ...
client netty 主动发数据_netty案例，netty4.1基础入门篇十一《netty udp通信方式案例Demo》...
小傅哥 | https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获.专注于原创专题案例编写,目前已完成的专题有:Netty4.x实战专题案例.用Java实现JVM.基于Ja ...
Linux基础入门篇知识回顾
Linux基础入门篇知识回顾一.回顾书籍二.基础知识 1.计算机基础知识 1.1计算机的特点及发展趋势 ①特点 ②发展趋势 1.2计算机系统组成 ①计算机硬件概念 ②计算机硬件各部分功能 ![在这 ...
Web基础配置篇（十二）: Elasticsearch的安装配置及入门使用
Web基础配置篇(十二): Elasticsearch的安装配置及入门使用一.概述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RE ...
生日祝福小程序_广告配音剪映零基础入门教程第二十六篇：如何给朋友制作生日祝福视频...
经常听到小伙伴问到生日祝福视频怎么做,当然我想既然要为他人做生日祝福视频,那么这个人必定是自己身边比较重要的人,而生日又是每个人都是非常重要的,在这种充满意义的时刻,我们想给自己极其重要的人送上一份祝 ...
EGE基础入门篇（二）：开始使用EGE
EGE专栏:EGE专栏上一篇:EGE基础入门篇(一):绘图基础知识下一篇:EGE基础入门篇(三):开场动画 EGE基础入门篇(二) 文章最后修改时间:2021年6月23日19:30:47 文章目录 ...

JS基础入门篇（二十）—事件对象以及案例（二）

案例一.点击按钮，选中input中的全部内容

案例二.点击按钮，选中input中的全部内容，并复制到粘贴板上。

事件对象

案例三：模拟苹果电脑菜单

JS基础入门篇（二十）—事件对象以及案例（二）相关推荐

最新文章

热门文章