第53天：鼠标事件、event事件对象
-->鼠标事件
-->event事件对象
-->默认事件
-->键盘事件（keyCode）
-->拖拽效果
一、鼠标事件
onclick ---------------鼠标点击事件
oncontextmenu------鼠标右键点击
onmouseover --------鼠标移上
onmouseout ---------鼠标移出
onmousedown -------鼠标按下
onmousemove -------鼠标移动
onmouseup ----------鼠标抬起
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
*{margin:0;padding:0;list-style: none;}
#con{
width:300px;
height:300px;
background: #ccc;
border:1px solid #666;
margin:10px auto;
}
#con #box{
width:200px;
height:200px;
margin:50px auto;
background: pink;
}
</style>
</head>
<body>
<div id="con">
<div id="box"></div>
</div>
</body>
<script>
var con=document.getElementById('con');
var x=0,y=0,z=0,a=0,b=0,c=0;
//onclick ---------鼠标点击事件
document.onclick=function(){
x++;
console.log('鼠标点击_onclick'+x);
}
//oncontextmenu----鼠标右键点击
document.oncontextmenu=function(){
alert('鼠标右击事件');//先弹出弹框后显示菜单
}
//onmouseover -----鼠标移上(包括子元素)
con.onmouseover=function(){
y++;
console.log('鼠标移上_onmouseover'+y);
}
//onmouseout ------鼠标移出（包括子元素）
con.onmouseout=function(){
z++;
console.log('鼠标移出_onmouseout'+z);
}
//onmouseenter -----鼠标移上
con.onmouseenter=function(){
y++;
console.log('鼠标移上_onmouseenter'+y);
}
//onmouseleave------鼠标移出
con.onmouseleave=function(){
z++;
console.log('鼠标移出_onmouseleave'+z);
}
//onmousedown -----鼠标按下
document.onmousedown=function(){
a++;
console.log('鼠标按下_onmousedown'+a);
}
//onmouseup ------鼠标抬起
document.onmouseup=function(){
b++;
console.log('鼠标按下_onmouseup'+b);
}
//onmousemove -----鼠标移动
con.onmousemove=function(){
c++;
console.log(c);
}
</script>
二、event事件对象
event对象只在事件发生的过程中才有效
用途：需要获取和事件相关的信息时使用
如：
获取键盘按下或弹起的按键
获取鼠标的位置坐标
获取事件名称
获取事件生成的日期时间
等等......
event对象中包含了所有与事件相关的信息
所有浏览器都支持event对象，只是支持的方式不一样
- FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意
- 而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event
例如：
document.onmousedown=function ( ev ){
var Event = ev || window.event ; //兼容各个浏览器
alert( Event.clientX ) ;// 弹出鼠标相对窗口的X轴坐标
console.log(Event);
};
关于使用event事件的兼容写法:
//IE9以上 谷歌 火狐支持 / IE6、7、8不支持
document.onclick=function (ev){
var e=ev;
console.log('鼠标指针对于浏览器页面的水平坐标'+e.clientX); }
//IE 谷歌支持/ 火狐不支持
document.onclick=function (){
var e=window.event||ev;
console.log('鼠标指针对于浏览器页面的垂直坐标'+e.clientY);
}
/*兼容各个浏览器，event事件写法*/
document.onclick=function (ev){
var eve=window.event||ev;//event事件兼容写法写法
console.log(eve.clientY);
console.log(eve.preventDefault);
}
三、默认事件
阻止默认事件（阻止使用右键事件）
document.oncontextmenu = function(ev) {
var Event=ev||window.event;
if (Event.preventDefault) {
//阻止默认动作(W3C)
Event.preventDefault();
} else{
//IE中阻止默认动作
Event.returnValue=false;
};
alert('禁止使用右键！');
}
四、键盘事件（keyCode）
document.onkeydown=function (ev){
var Event=ev||window.event;
alert(Event.keyCode);
}
组合键： ctrl + c
Event.ctrlKey&&Event.keyCode==67
/*禁止右击阻止事件的兼容方式写法*/
document.oncontextmenu=function (ev){
var ev=window.event||ev;
if (ev.preventDefault) {
ev.preventDefault();//w3c阻止默认事件
}else{
ev.returnValue=false;//IE阻止默认事件
};
}
/*对获取键盘键码的兼容写法*/
document.onkeydown=function (ev){
var e=window.event||ev;
console.log(e.keyCode);//打印键码
}
<禁止复制>的练习：
<body>
<p id="con">我要的只是简单地，只是诚实的，好好享受平凡，会好的，一定会好的！我要的只是你爱我，可不是你恨我，哪来的那么多麻烦!</p>
</body>
<script>
var con=document.getElementById('con');
/*阻止元素右击事件*/
con.oncontextmenu=function(ev){
var Event=ev||window.event;
if (Event.preventDefault) {//阻止默认动作(W3C)
Event.preventDefault();
} else{//IE中阻止默认动作
Event.returnValue=false;
};
alert('禁止使用右键！');
}
/*阻止ctrl+c操作*/
document.onkeydown=function(ev){
var e=ev||window.event;
if (e.ctrlKey&&e.keyCode==67) {
if(e.preventDefault()){
e.preventDefault();
}else {
e.returnValue=false;
}
alert('不能这样操作!');
}
}
/*阻止鼠标按下操作*/
document.onmousedown=function(ev){
var e=ev||window.event;
if (e.preventDefault()) {
e.preventDefault();
} else {
e.returnValue=false;
}
alert('禁止鼠标按下!')
}
</script>
五、拖拽效果
主要知识点：
onmousedown onmousemove onmouseup
event.clientX event.clientY
offset client 系列属性
鼠标拖拽_T:
<head>
<meta charset="UTF-8">
<title>鼠标拖拽_T</title>
<style>
*{margin:0;padding:0;list-style: none;}
#dot{
width:80px;
height:80px;
line-height: 30px;
text-align: center;
font-size:24px;
background: #D00000;
color:#fff;
cursor:move;
position:absolute;
left:300;
top:100;
}
</style>
</head>
<body>
<div id="dot"></div>
</body>
<script>
var dot=document.getElementById('dot');
var x,y;
var xStart,yStart;
var xEnd,yEnd;
dot.onmousedown=function(ev){
var e=window.event||ev;
x=e.offsetX;
y=e.offsetY;
dot.onmousemove=function(ev){
var e=window.event||ev;
var xEnd=e.clientX-x;
var yEnd=e.clientY-y;
dot.style.left=xEnd+'px';
dot.style.top=yEnd+'px';
}
}
dot.onmouseup=function(){
dot.onmousemove=null;
}
</script>
鼠标拖拽_M
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
*{margin:0;padding:0;list-style: none;}
#dot{
width:80px;
height:80px;
line-height: 30px;
text-align: center;
font-size:24px;
background: #D00000;
color:#fff;
cursor:move;
position:absolute;
/* left:0;
top:0; */
}
</style>
</head>
<body>
<div id="dot"></div>
</body>
<script>
var dot=document.getElementById('dot');
var x,y;
var l1,t1;
var lm,tm;
var le,te;
var a=true;
dot.onmousedown=function(ev){
a=true;
var e=window.event||ev;
x=e.offsetX;
y=e.offsetY;
l1=e.clientX-x;
t1=e.clientY-y;
dot.style.left=l1+'px';
dot.style.top=t1+'px';
console.log(x,y);
}
dot.onmousemove=function(ev){
if(a){
var e=window.event||ev;
var lm=e.clientX-x;
var tm=e.clientY-y;
dot.style.left=lm+'px';
dot.style.top=tm+'px';
}
}
dot.onmouseup=function(ev){
a=false;
}
</script>
第53天：鼠标事件、event事件对象的更多相关文章
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- 深入理解事件(Event)
前言 在前一篇文章中讲到了Event 发布与订阅(一) 里面用到了事件来实现一些发布与订阅,当时对事件及其委托理解的还不是太深入,可能在使用上有点捉急.这篇来好好讲讲事件,以及通过一些小DEMO来加深 ...
- Event事件与协程
1.Event事件 Event事件的作用: - 用来控制线程的执行. - 由一些线程去控制另一些线程. 2.进程池与线程池 1)什么是进程池与线程池? 进程池与线程池是用来控制当前程序允许创建(进程/ ...
- 通过js触发onPageView和event事件获取页面信息
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814814715022148100/ 承接上一篇文档<js页面触发launch事件编写> pageVi ...
- Javascript 事件对象（二）event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- 【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- VIM Commands
Vim Commands Commands in NORMAL modes Motions small granular: move by direction k h l j mid granular ...
- 20154327 Exp7 网络欺诈防范
基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击. 乱连公共场合的免费WiFi容易受到攻击,比如酒店.商场的免费WiFi (2)在日常生活工作中如何防范以上两攻击方法 对于第一种,我 ...
- quartz 核心概念
一.quartz 核心概念 1.scheduler是一个计划调度器容器,容器里面可以盛放众多的JobDetail和trigger,当容器启动后,里面的每个JobDetail都会根据trigger按部就 ...
- photoshop cc 2018安装破解教程（破解补丁，亲测，绝对可用）
破解步骤说明:下载地址百度网盘,https://pan.baidu.com/s/1cWtpUesl2fms3tFwEC0MiQ 1.右键解压Adobe Photoshop CC 2018 64位这个文 ...
- Selenium自动化测试第一天(下)
如有任何学习问题,可以添加作者微信:lockingfree 目录 Selenium自动化测试基础 Selenium自动化测试第一天(上) Selenium自动化测试第一天(下) Selenium自动化 ...
- 第六阶段·数据库MySQL及NoSQL实践第1章·章节一MySQL数据库
01 课程介绍 02 数据库管理系统介绍 03 MySQL安装方式介绍及源码安装 04 MySQL安装后的基本配置 05 MySQL体系结构-服务器.客户端模型 06 MySQL体系结构-实例.连接层 ...
- Unity制作人物头像小图标和小地图
人物头像的制作: 在场景中添加人物模型和环境模型 设置人物的layer为Player 在主摄像机的基础上,新建一个次摄像机并将摄像机镜头对准人物面部,调整至合适大小. 设置次摄像机 culling m ...
- POJ 3046
题目大意:蚂蚁牙黑,蚂蚁牙红:有A只蚂蚁,来自T个家族,分别记为ant[i]个.同一个家族的蚂蚁长得一样,但是不同家族的蚂蚁牙齿颜色不同.任取n只蚂蚁(S <= n <= B),求能组成几 ...
- HADOOP docker(三):HDFS高可用实验
前言1.机器环境2.配置HA2.1 修改hdfs-site.xml2.2 设置core-site.xml3.配置手动HA3.1 关闭YARN.HDFS3.2 启动HDFS HA4.配置自动HA4. ...
- 索引值迭代-enumerate
你想在迭代一个序列的同时跟踪正在被处理的元素索引?内置的enumerate() 函数可以很好的解决这个问题: list_c = ['a', 'b', 'c'] for i, c in enumerat ...