第十一节 JS事件基础
空白点击事件（没什么用处，做个介绍）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击</title>
<style>
body{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
// document.body.onclick = function(){ //当界面什么也不写时，设置一个body点击事件，
// alert('a'); //该句未被执行
// };
//但是当“body”内加入一个<button>之后，就算不点击按钮，而是点击空白区域（但是空白区域必须是按钮“aaa”所在的行，给
//body加上边框后就很容易看到了），也会有“a”弹出。其实不放东西点击事件没反应的原因是，当body内什么也不放时，body
//实际区域大小为0，而不是整个空白区域，所以点击失效。
//当我们想在任意(空白/非空白）区域点击都会相应点击事件时，我们只需如下改进
document.onclick = function(){
alert('a');
};
};
</script>
</head>
<body>
<button>aaa</button>
</body>
</html>
event对象和事件冒泡
什么是event对象
用来获取事件的详细信息：鼠标位置、键盘按键
例子：获取鼠标位置：clientX
document的本质：用“document.childNodes[0].tagName”获取：其实document相当于网页的最大标签，是“<!DOCTYPE html>“和”<html lang="en">...</html>”两个标签共同的父级，其中“<html>”标签中放的的我们写的内容，所以上面“空白点击事件”中只有给 document 加 onclick 才能实现点击事件的响应，所以之后做开发时，保证网页最大的通用性，我们需要给document加上点击事件。
获取event对象（兼容性写法）
var oEvent=ev||event；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取鼠标位置</title>
<script>
window.onload = function () {
document.onclick = function(ev){
//IE浏览器 上面function() 无参数
// alert(event.clientX); //获取鼠标横坐标的值，其中原点位置为左上角，坐标为(0,0)
// alert(event.clientX+','+event.clientY); //获取鼠标的横纵坐标，并用“，”隔开 //FF浏览器 上面function(ev) 有参数
// alert(ev.clientX+','+ev.clientY); //上述两段合并为 上面function(ev) 有参数
var oEvent = ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
};
};
</script>
</head>
<body> </body>
</html>
事件流：
事件冒泡：下面代码我们给三个div、body、html都添加了onclick事件，当我们点击任意一个标签时，除自身点击事件响应外，其父级及父级的父级都会响应点击事件，这就是所谓的“事件冒泡
<!DOCTYPE html>
<html lang="en" onclick="alert(this);">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
div{padding: 100px;}
</style>
</head>
<body onclick="alert(this);">
<div style="background: #ccc;" onclick="alert(this.style.background);">
<div style="background: green;" onclick="alert(this.style.background);">
<div style="background: red;" onclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>
取消冒泡
例子：仿select控件
DOM事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿select下拉框</title>
<style>
#div1{
width: 400px;
height: 300px;
background: #cccccc;
display: none;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1'); // oBtn.onclick = function () {
// oDiv.style.display = 'block';
// alert('点击按钮事件!');
// };
// document.onclick = function () {
// oDiv.style.display = 'none';
// alert('document点击事件!');
// };
//如上述所写的，“按钮点击事件”结束后立即执行“document点击事件”，中间几乎看不到div的出现，这就是事件冒泡带给我们的困扰
//但是我们又想让弹出的div，在点击任意位置后隐藏，我们该怎么解决呢？我们重点是要取消冒泡，如下：
oBtn.onclick = function (ev) {
var oEvent = ev||event; oDiv.style.display = 'block';
oEvent.cancelBubble = true; //取消冒泡
};
document.onclick = function () {
oDiv.style.display = 'none';
};
};
</script>
</head>
<body>
<button id="btn1">显示</button>
<div id="div1"></div>
</body>
</html>
仿select控件
鼠标事件
鼠标位置
可视区位置：clienX（鼠标横坐标）、clientY（鼠标纵坐标）
例子：跟随鼠标的Div
消除滚动条的影响
滚动条的意义：可视区域页面顶部的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标坐标</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<script>
document.onmousemove = function(ev){
var oEvent = ev||event;
var oDiv = document.getElementById('div1'); // oDiv.style.left = oEvent.clientX+'px';
// oDiv.style.top = oEvent.clientY+'px';
//其中clientX和clientY为可视区坐标，在不设置body的“宽和高”时，div随着鼠标的移动而移动，
//并且div的左上角始终与鼠标箭头的尖对齐；
//
//但是当我们有的body足够高和足够宽的时候，也就是出现滚动条的时候，当滚动条“只往下滚动”，div
//和鼠标在纵坐标上发生偏移，出现“div左上角在上，鼠标在下的情况”，并且滚动条越往下，偏移越大；
//同样，当滚动条“只往右滚动”，div和鼠标在横坐标上发生偏移，出现“div左上角在左，鼠标在右的情况”，
//并且滚动条越往右，偏移越大；同理，当两个滚动条“都响应向下和向右滚动”时，div和鼠标在横坐标和纵坐
//标都发生偏移，出现“div左上角在左上，鼠标在右下的情况”，并且滚动条越往右和下，偏移越大；
//
//我们的解决办法是运动scrollTop和scrollLeft获取“可视区距离body顶端和左端的距离”，如下：
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left = oEvent.clientX+scrollLeft+'px';
oDiv.style.top = oEvent.clientY+scrollTop+'px';
//所以我们之后在做开发时，在需要用到鼠标位置的时候，最好都加上scrollTop和scrollLeft以免出错
}
</script>
</head>
<body style="height: 2000px; width: 2000px;">
<div id="div1"></div>
</body>
</html>
获取鼠标在页面的绝对位置
封装函数，把上述<script>标签内的内容进行改进封装：
//把上述<script>标签内的进行封装改进，如下：
<script>
//获取位置，函数封装
function getPos(ev){
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
document.onmousemove = function(ev){
var oEvent = ev||event;
var oDiv = document.getElementById('div1');
var pos = getPos(oEvent); oDiv.style.left = pos.x+'px';
oDiv.style.top = pos.y+'px';
}
</script>
例子：一串跟随鼠标的Div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一串跟着鼠标的div</title>
<style>
div{
width: 20px;
height: 20px;
background: red;
position: absolute;
}
</style>
<script>
function getPos(ev){
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
} document.onmousemove = function (ev) {
var oEvent = ev||event;
var aDiv = document.getElementsByTagName('div');
var pos = getPos(oEvent); for (var i = aDiv.length - 1; i > 0; i--) {
aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
} aDiv[0].style.left = pos.x+'px';
aDiv[0].style.top = pos.y+'px';
};
</script>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>
键盘事件：
keyCode：获取用户按下键盘的哪个键
<script>
document.onkeydown = function (ev) {
var oEvent = ev||event; alert(oEvent.keyCode); //获取键盘每个键的编码值，具体键值编码，可参照ASCII码表
};
</script>
例子：键盘控制Div的移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘控制div的移动</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: #cccccc;
position: absolute;
}
</style>
<script>
document.onkeydown = function (ev) {
var oEvent = ev||event;
var oDiv = document.getElementById('div1'); if (oEvent.keyCode == 37) { //当按下左键时
oDiv.style.left = oDiv.offsetLeft-10+'px'; //div向左移动10像素
} else if (oEvent.keyCode == 39) { //当按下右键时
oDiv.style.left = oDiv.offsetLeft+10+'px'; //div向右移动10像素
} else if (oEvent.keyCode == 38) { //当按下上键时
oDiv.style.top = oDiv.offsetTop-10+'px'; //div向上移动10像素
} else if (oEvent.keyCode == 40) { //当按下下键时
oDiv.style.top = oDiv.offsetTop+10+'px'; //div向下移动10像素
}
//细心的同学可能会发现，当按下按键不松开时，div会相应向前后左右“顿”一下后，在继续运动（这种情况普遍存在，
//我们打字的时候也会出现这样的效果）但是我们如何让其不出现卡顿的情况呢？敬请解答！ };
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
其他属性：
ctrlKey、shiftKey、altKey
例子：提交留言（Enter——提交；Ctrl+Enter——提交）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ctrl+Enter提交留言</title>
<script>
window.onload = function () {
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2'); //当按下“Enter”键时提交留言
// oTxt1.onkeydown = function (ev) {
// var oEvent = ev||event;
// if (oEvent.keyCode == 13) { //当按下回车键
// oTxt2.value += oTxt1.value+'\n';
// oTxt1.value = '';
//
// }
// }; //当按下“Ctrl+Enter”键时提交留言
oTxt1.onkeydown = function (ev) {
var oEvent = ev||event;
if (oEvent.keyCode == 13 && oEvent.ctrlKey) { //当按下回车键
oTxt2.value += oTxt1.value+'\n';
oTxt1.value = '';
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<!--<button id="btn1">提交留言</button>-->
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>
默认行为：浏览器自带的行为都叫默认行为，比如说：鼠标点击右键，会有对话框弹出等都是默认行为
阻止默认行为
普通写法：return false;
document.oncontextmenu = function () { //环境菜单/右键菜单
return false; //该句就是阻止右键菜单默认事件
}；
例1：屏蔽右键菜单：弹出自定义右键菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认行为</title>
<style>
*{margin: 0; padding: 0; list-style: none;}
#div1{
position: absolute;
width: 80px;
background: #cccccc;
border: 1px solid black;
display: none;
}
</style>
<script>
// document.oncontextmenu = function () { //环境菜单/右键菜单
// return false; //该句就是阻止右键菜单默认事件
// };
document.oncontextmenu = function (ev) { //环境菜单/右键菜单
var oEvent = ev||event;
var oDiv = document.getElementById('div1'); oDiv.style.display = 'block';
oDiv.style.left = oEvent.clientX+'px';
oDiv.style.top = oEvent.clientY+'px'; return false; //该句就是阻止右键菜单默认事件
}; document.onclick = function () {
var oDiv = document.getElementById('div1');
oDiv.style.display = 'none';
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li>aaaaa</li>
<li>sssss</li>
<li>ccccc</li>
<li>zzzzz</li> </ul>
</div>
</body>
</html>
例2：只能输入数字的输入框：keydown、keyup事件的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>只能输入数字的输入框</title>
<script>
window.onload = function () {
var oTxt = document.getElementById('txt1'); //彻底禁止输入，所有的输入都被禁止
// oTxt.onkeydown = function () {
// return false;
// }; // oTxt.onkeydown = function (ev) {
// var oEvent = ev||event;
// // alert(oEvent.keyCode); //查看数字的编码，得出键盘上方的一排数字的ASCII码分别为：
// // 0的ASCII码为48,9的ASCII码为57；小键盘中数字的ASCII码分别为：0~9:(96~105)
// if (oEvent.keyCode<48||oEvent.keyCode>57){
// return false;
// }
// };
//上述功能存在的问题是，在中文拼音输入法下，由于拼音都是先打好字，然后“空格”键入，此时阻止不了，
//但是不管中英文输入法，系统不能左右键移动插入，不能删除，不能修改，具有局限性，改进如下： //如果用户按的不是退格、也不是数字才阻止，但是只能键盘上面一排数字可以键入，小键盘数字和上下左右键请自行添加
oTxt.onkeydown = function (ev) {
var oEvent = ev||event;
if (oEvent.keyCode!=8 && (oEvent.keyCode<48||oEvent.keyCode>57)){
return false;
}
}; };
</script>
</head>
<body>
<input type="text" id="txt1"/>
</body>
</html>
拖拽
简易拖拽
拖拽原理（距离不变、三个事件）
靠谱拖拽：
原有拖拽的问题：
直接给document加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; // oDiv.onmousemove = function (ev) {
// var oEvent = ev||event;
//
// oDiv.style.left = oEvent.clientX-disX+'px';
// oDiv.style.top = oEvent.clientY-disY+'px';
// };
//只写上述两个事件的嵌套的话，会出现div像吸铁石一样当鼠标靠近，它会自动跑到鼠标下方，
//而且就算不按下鼠标，慢慢移动，div就甩不掉，所以我们要加上下面一个事件，如下：
// oDiv.onmouseup = function () {
// oDiv.onmousemove = null;
// oDiv.onmouseup = null;
// };
//加上上面一个“up”事件，仍然存在一个小问题：当按下鼠标左键拖动div时，当鼠标“猛一下”快速移动，
//div就会发生跟不上鼠标而“脱离”的情况，其实归根结底就是div太小了，所以鼠标容易脱离，但是我们把
//div放大又不现实，所以解决办法如下：把上面两个事件设为建立在document的事件（document足够大）
document.onmousemove = function (ev) {
var oEvent = ev||event; oDiv.style.left = oEvent.clientX-disX+'px';
oDiv.style.top = oEvent.clientY-disY+'px';
}; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
FF下，空div拖拽Bug：当上面的拖拽代码在火狐浏览器上运行时，由于div标签内没有放任何东西，所以拖拽第一次没什么问题，但当再一次拖拽时，div会出现一个带透明度的div框（像灵魂出窍/分身一样）跟着鼠标走，而原来的div在原地不动，当鼠标抬起，原来的div会瞬间平移到其“分身”里，并合并在一起。（目前火狐的版本已经修复）我们需要做的是，加上一句“return false;” //阻止默认事件，来组织火狐出现的Bug。如下：
防止拖出页面：上面拖拽代码就存在这样的问题，这样用户体验度会很差，因为如果该拖动窗口是一个登录页面时，如果用户拖拽的比较快，就有可能直接把“拖拽窗口”送出可视区域，而发生找不到“拖动窗口”的情况。所以我们需要“修正位置”。解决如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
var to = oEvent.clientY-disY; var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度 if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} if(to<0) {
to = 0; //让窗口从上边出不去
} else if (to > bo){
to = bo; //让窗口从下边出不去
} oDiv.style.left = le+'px';
oDiv.style.top = to+'px'; }; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
第十一节 JS事件基础的更多相关文章
- 第十四节 JS面向对象基础
什么是面向对象:在不需要知道它内部结构和原理的情况下,能够有效的使用它,比如,电视.洗衣机等也可以被定义为对象 什么是对象:在Java中对象就是“类的实体化”,在JavaScript中基本相同:对象是 ...
- Js 事件基础
一:js中常见得事件 (1) : 鼠标事件 click :点击事件 dblclick :双击事件 contextmenu : 右键单击事件 ...
- JS事件基础
事件对象Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的 ...
- JS——事件基础应用
直接写在html标签里: <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> 另外一种在脚本里调用: <!D ...
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- JS 的事件基础、事件侦听与抛发、
前言 JavaScript是一种事件驱动型语言.事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行.这个合适的时间是指当某个事件发生之后(例如一个输入框的 ...
- node.js零基础详细教程(4)：node.js事件机制、node异步IO操作
第四章 建议学习时间3小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
随机推荐
- linux学习：find用法整理
find path -option [ -print ] [ -exec -ok command ] {} \; path: find命令所查找的目录路径.例如用.来表示当前目录,用/来表示系统根目录 ...
- 软件体系架构之ssh框架阅读笔记
首先我们要了解一下什么是ssh框架? SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架. ssh框架系统从职责上分为四层:web层 业 ...
- java--List、Set、Map的基础
好像面试很多面试官都喜欢问这它们的一些问题,所以在这里我稍微总结一下,并把大佬们的文章链接贴在后面. 首先我们借鉴了https://www.cnblogs.com/SnowingYXY/p/67273 ...
- 报文分析4、TCP协议的头结构
TCP协议的头结构 来源端口(2字节) 目的端口(2字节) 序号(4字节) 确认序号(4字节) 头长度(4位) 保留(6位) URG ACK PSH RST SYN PIN 窗口大小(2字节) 校验和 ...
- CPU漏洞补丁KB4056892 卸载及忽略办法
2018.1.4微软发布了针对intel CPU漏洞的补丁 KB4056892 性能降低不说, 针对一般平民根本没多大意义, 另外还会导致一些软件无法正常使用, (我是使用蓝叠经典版, 启动就会蓝屏) ...
- Mac 下安装Fiddler抓包工具
需求 我们都知道在Mac电脑下面有一个非常好的抓包工具:Charles.但是这个只能抓代理的数据包.但是有时候想要调试本地网卡的数据库 Charles 就没办法了.就想到了在windows下面的一个F ...
- 《Zero MQ》
原文链接 http://www.aosabook.org/en/zeromq.html ZeroMQ ZeroMQ 是一个消息系统,或者‘面向消息的中间件’.广泛应用于金融服务,游戏开发,嵌入式系统, ...
- linux软件安装方式
先插句题外话,快捷键 Ctrl+s 的功能是停止输入,Ctrl+q 恢复输入; 正题,在linux的应用软件安装有三种: 1,tar包 2,rpm包 3,dpkg包 以下介绍三种包的安装和卸载方式 1 ...
- [vue开发记录]float label输入框
上图: 组件代码: <!-- Created by Locke Ou on 2018/6/20. --> <template> <div> <div clas ...
- 选择排序（JAVA实现）
算法思想:每一趟从待排序的记录中选出最小的元素,顺序放在已排好序的序列最后,直到全部记录排序完毕.也就是:每一趟在n-i+1(i=1,2,…n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录 ...