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;//打印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>JS基础入门篇（二十）—事件对象以及案例（二）的更多相关文章
- JS基础入门篇（十八）—日期对象
1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...
- JS基础入门篇（十二）—JSON和Math
1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...
- JS基础入门篇（四十三）—ES6（二）
1.对象简洁表示法 原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...
- JS基础入门篇（十）— 数组方法
1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇（三十六）—面向对象（ 三 ）
1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...
- JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
- JS基础入门篇（二十四）—DOM（上）
1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...
随机推荐
- C# 接口练习
#define debug using System; using System.Collections; namespace ConsoleApp1 { interface IAnimal { in ...
- 扩增|feather evolution
Wool vs feather 扩增方法:1.Gene Duplication2.Genome Duplication3.Cluster 哺乳动物毛发和鸟类的羽毛,都来自于角蛋白. 羽毛进化图 DNA ...
- VBA自动点击IE的浏览按钮、自动选择路径、自动关闭打开文件对话框
VBA调用InternetExplorer操作IE浏览器,自动弹出文件选择对话框时,VBA会处于阻塞状态,你必须手工关闭文件选择对话框,VBA才能继续向后运行. 例如下面网址,就有一个文件浏览按钮: ...
- ROS中的日志（log）消息
学会使用日志(log)系统,做ROS大型项目的主治医生 通过显示进程的运行状态是好的习惯,但需要确定这样做不会影响到软件的运行效率和输出的清晰度.ROS 日志 (log) 系统的功能就是让进程生成一些 ...
- django框架进阶-admin-长期维护
############### django--admin的使用 ################ # django后台管理: # 第一步: # 在settings文件中修改语言和时区 L ...
- django框架进阶-form组件-长期维护
################## form组件做了什么事情? ####################### 之前web开发的模式,以注册为例 1,要有一个注册页面,然后有一个f ...
- Critical-Value|Critical-Value Approach to Hypothesis Testing
9.2 Critical-Value Approach to Hypothesis Testing example: 对于mean 值 275 的假设: 有一个关于sample mean的distri ...
- Python之循环条件、变量、字符串格式化
一.认识python python语言的优缺点,自行百度,这里不概述,简单说下,python是一门面向对象,解释型计算机语言.那么问题来了,解释型和编译型语言有什么区别? 1.解释型和编译型语言区别 ...
- C语言占位符（待完善）
%c 读入一个字符 %s 读入一个字符串,遇到空格制表符或者换行符时结束. %d 读入一个十进制整数 %x或者%X 读入一个十六进制整数(读出时,%x:小写,%X:大写) %o 读入一个八进制 ...
- .net core && python
最近.net core的发展,确实值得激动,强力推荐传教文章<.NET:持续进化的统一开发平台>http://www.cnblogs.com/wer-ltm/p/8776846.html ...