事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
事件通常与函数结合使用，函数不会在事件发生前被执行！

A、只有当事件发生的时候才产生，只能在处理函数内部调用
B、处理函数运行结束后自动销毁

二、如何获取事件对象

IE：window.event
FF:对象.on事件=function(e){}

事件：
鼠标
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。

键盘
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
框架/对象（Frame/Object）事件 表单事件 剪贴板事件.......

三、事件对象的属性

A、关于鼠标事件的事件对象
1. 相对于浏览器位置的
clientX--当鼠标事件发生时相，鼠标相对于浏览器X轴的位置
clientY--当鼠标事件发生时相，鼠标相对于浏览器Y轴的位置
2.相对于屏幕的位置的
3.相对于事件源的位置

B、关于键盘事件的事件对象

1、keyCode——获得键盘码
2、altKey,ctrlKey,shiftKey--判断这几个键是否被按下，按下为true，否则为false
3、type--用来检测事件的类型，主要用于多个事件通用一个事件处理程序的时候

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1.eg:overflow:hidden;
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

2.border-bottom-width 规定下边框的宽度。
border-bottom-style 规定下边框的样式。
border-bottom-color 规定下边框的颜色。
inherit 规定应该从父元素继承 border-bottom 属性的设置。
eg：
border-style:solid;
border-bottom:thick dotted #ff0000;

3.

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
eg：<textarea id="txt1" rows="4" cols="40"></textarea>

4.操作整个页面

<script>

window.onload=function(){

     document.body.onclick=function(){

         alert('a');

     }

}

</script>

<body style="border:1px solid red;">

<input type="button" value="aaa"/>

</body>

/*想达到一个目的 点击页面的任意位置页面能做出反应(alert..)但是发现

document.body.onclick这招行不通

然后通过 style="border:1px solid red;"发现其实body撑不起来

<input type="button" value="aaa"/>+style发现body就那么大

(如果没有<input type="button" value="aaa"/>这句话(此时body就是一条线 得点击线才会反映alert)

*/
改正：

document.onclick=function(){
         alert('a');

     }     以后想用到整个页面的话就直接给document加




5.event




window.onload=function (){

    /*event事件对象 兼容性

     IE下事件处理函数

     document.onclick=function(){

       alert(event.clientX+','+event.clientY);//告知鼠标点击时的坐标(x,y)在哪个位置

     }

    Firefox下的事件处理函数 不同于IE 它是有一个参数的  参数是由系统传递过来的

    document.onclick=function(ev){

       alert(ev.event.clientX+','+ev.event.clientY);

     }*/

    document.onclick=function(ev){

          var oEvent=ev||event;

          alert(oEvent.clientX+','+oEvent.clientY);

   }

}




6.事件冒泡(是最简单的事件流）




oBtn.onclick=function(ev){


        var oEvent=ev||event; //把事件对象获取过来


        


       oEvent.cancelBubble=true;//取消冒泡 就是事件不会再往上传了


}






/*
当最里面的div被点击之后他会把这个事件传递给他的父集 依次往上传直到html
所以你点击最里面的div(红色部分)会弹出red->green->(204,204,204)->body->html
事件冒泡：事件会顺着层级往上走 
*/




<!DOCTYPE html>

<html onclick="alert('html');">

.....

<body onclick="alert('body');">

<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>




7.键盘


keyCode:获取用户按下键盘的哪个按键






document.onkeydown=function(ev){ //按下去就会发生不需要抬起来

     var oEvent=ev||event;

     alert(oEvent.keyCode); //按下a弹出65 没法出A因为按大小写键盘弹出20

             //keyCode获取用户按下键盘的哪个按键

}






ctrlKey告诉我们ctrl有没有按下去(k是大写)


同理shiftKey altKey


 


8.oncontextmenu


document.oncontextmenu=function (){ //oncontextmenu:当用户点击右键


return false;                 再点击右键 右键菜单出不来了--》阻止默认事件
}


只能在文本框内输入数字:




if(oEvent.keyCode<48||oEvent.keyCode>57){


           return false;


} 因为其实在键盘按下什么键 text框内就出现什么键这个也是默认行为




所以如果想只能输入数字 就取消其他类型的默认行为；


 


拖拽行为:      鼠标和窗口左上角的距离保持不变






onmousedown:鼠标按下 onmousemove:鼠标移动 onmouseup:鼠标抬起


onmousemove 事件会在鼠标指针移到指定的对象时发生 当用户按下鼠标按钮执行Javascript代码


 


















												


											
JS事件基础的更多相关文章
	

    
						
  1. Js 事件基础
		
    一:js中常见得事件 (1) : 鼠标事件         click :点击事件         dblclick :双击事件         contextmenu : 右键单击事件        ...
    
		
    2. 
						
  2. 第十一节 JS事件基础
		
    空白点击事件(没什么用处,做个介绍) <!DOCTYPE html> <html lang="en"> <head> <meta char ...
    
		
    3. 
								
  3. JS——事件基础应用
		
    直接写在html标签里: <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> 另外一种在脚本里调用: <!D ...
    
		
    4. 
						
  4. C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
		
    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
    
		
    5. 
						
  5. JS 的事件基础、事件侦听与抛发、
		
    前言 JavaScript是一种事件驱动型语言.事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行.这个合适的时间是指当某个事件发生之后(例如一个输入框的 ...
    
		
    6. 
						
  6. node.js零基础详细教程(4)：node.js事件机制、node异步IO操作
		
    第四章 建议学习时间3小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...
    
		
    7. 
						
  7. jS事件之网站常用效果汇总
		
    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
    
		
    8. 
						
  8. JS事件委托的原理和应用
		
    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
    
		
    9. 
						
  9. Node.js 事件循环（Event Loop）介绍
		
    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 17)django-模板的继承与导入
			
    情况1:通常写页面都有个模板用来框定头部LOGO页面,左侧导航菜单,只有右部的内容不同.如果不使用模板就大量重复工作. 特别如果头部或者左侧导航需要修改或者添加,所有页面都需要修改.django 通过 ...
    
			
    2. 
						
  2. SwipeRefreshLayout，用最少的代码定制最美的上下拉刷新样式
			
    下拉刷新框架其实有很多,而且质量都比较高.但是在日常开发中,每一款产品都会有一套自己独特的一套刷新样式.相信有很多小伙伴在个性化定制中都或多或少的遇到过麻烦.今天我就给大家推荐一个在定制方面很出彩的一 ...
    
			
    3. 
						
  3. oracle user locked(timed)处理
			
    故障现象: SQL> connect scott/scottERROR:ORA-01017: invalid username/password; logon deniedSQL> con ...
    
			
    4. 
						
  4. Oracle11g 新功能
			
    本文来源:<oacle11g 从入门到精通> 明日科技 Oracle11g 新功能 1:增强信息生命周期管理和储存管理能力 2:全面回忆数据变化 3:最大限度提高信息可用性 4:Oracl ...
    
			
    5. 
						
  5. Confluence 6 为发送邮件配置服务器
			
    配置你的 Confluence 服务器发送电子邮件消息能够允许你的 Confluence 用户: 接受邮件通知和每天更新报表. 通过电子邮件发送一个页面. 你可以通过配置 'From' 字段中的内容来 ...
    
			
    6. 
						
  6. linux和windows下，C/C++开发的延时函数，sleep函数
			
    简介: 函数名: sleep   功 能: 执行挂起一段时间   用 法: unsigned sleep(unsigned seconds);   在VC中使用带上头文件   #include < ...
    
			
    7. 
						
  7. 对<tr><td>标签里的input 循环取值
			
    需求描述:单击table整行,跳转到具体的信息页面  关键就是获取整行的id,传给后台做查询,返回list 解决思路:用带参数函数传过去id,然后在js的函数中用$("#id"). ...
    
			
    8. 
						
  8. 实现本地svn目录同步时，服务器的相应目录保持自动同步
			
    提交一个TEST文件夹 但是服务器上并没有显示 而新检出的目录却有 这个时候需要手动去update才会显示,而不可能每次都去update,所以,就用到配置自动更新 1.创建svn目录:mkdir /v ...
    
			
    9. 
						
  9. axure交互样式（下拉列表和矩形）
			
    *****矩形交互样式之单选按钮*****1.账号输入框.密码输入框等文本框实现效果:输入框获取焦点时边框是蓝色,失 去焦点时边框为红色: 2.实现思路:边框用矩形来设置选中和未选中.禁用和启用即可  ...
    
			
    10. 
						
  10. Appium Desired Capabilities
			
    Appium Desired Capabilities Desired Capabilities 是由 keys 和 values 组成的 JSON 对象. 举个简单例子: { "platf ...
    
			
    11.