JS学习笔记9之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>
JS学习笔记9之event事件及其他事件的更多相关文章
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
- Node.js学习笔记（2）：基本模块
Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
随机推荐
- 用Mindjet MindManager 15 打开文件后停止响应的解决方法
这个是因为文件里面有很多规格不统一的注释(那个像小本子的图标[里面就是注释部分]),默认编码是utf-8的,如果不一样的话就会出现这个问题.网上大多数都是让咱们删掉注释再打开 弱弱的问一下,如果我都把 ...
- JavaScript Prototype
function Obj () { } Obj.a=0; Obj.fn=function(){ } console.log(Obj.a); console.log(typeof Obj.fn);//f ...
- IOS各种集合遍历效率对比
前言: 对于ios项目开发中总会遇见各种集合遍历,出于对各种遍历效率的好奇心,所以准备写个测试程序测试一下 首先:先声明一个NSMutableArray,测试数据量分别是1000条,10000条,10 ...
- MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入
myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...
- Javascript优化细节：短路表达式
什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程 ...
- Html,Css,Dom,javascript细节总结
最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...
- 最大值最小化（DP）
题目来源:网易有道2013年校园招聘面试一面试题 题目描述: 在印刷术发明之前,复制一本书是一个很困难的工作,工作量很大,而且需要大家的积极配合来抄写一本书,团队合作能力很重要.当时都是通过招募抄写员 ...
- 自己在总结前人经验下弄的几个opencv封装函数
第一个是增加对比度的函数,就是变亮. IplImage* EqualizeHistColorImage(IplImage *pImage) { IplImage *pEquaImage = cvCre ...
- Android AlertDialog去除黑边白边自定义布局(转)
LayoutInflater inflater = this.getLayoutInflater(); View view = inflater.inflate(R.layout.test_alert ...
- json是个啥东东
xml 不用说 只要是搞web开发的 没听说谁不知道的 一种类似数据传输格式定义的语言 但是他却不是一个真正的轻量级的东西 其他的不说 只要传输一点很少的数据 经过他那左括号右括号 还有什么属性 一包 ...