js事件对象
哎，事件也有对象呦。程序员一直在讲对象对象，那么，过年是不是该带个对象回家呢？
好了，既然事件有对象，承认这个事实吧！哈哈，那么，其就有属性，接下来，就放个
例子来讲讲，顺便把常用的属性也添加进去。。
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="按下">
<div id="do"></div>
<script>
window.onload = function(){
var bt = document.getElementById("btn"); bt.onclick = ff;
bt.onmouseover = ff;
}
function ff(evn){
var di = document.getElementById("do");
if(window.event){evn = window.event}/*事件对象，兼容ie，事件对象是ie的一个属性*/
if(evn.type == "click"){/*就把这里的自定义evn作为一个对象来处理，这里，判断evn的事件对象的操作事件方式*/
di.innerHTML+= "click<br>";
}
else if(evn.type == "mouseover"){
di.innerHTML+= "mouseover<br>";
}
/*接下的都是事件对象的一些常用属性*/
console.log(evn.button);/*事件对象button属性*/
console.log(evn.type);/*事件对象type属性*/
console.log(evn.clientX);/*事件对象clientX属性 事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置*/
console.log(evn.clientY);/*事件对象clientY属性*/
console.log(evn.offsetX);/*事件对象offsetX属性 事件发生的时候，鼠标相对于源元素左上角的位置*/
console.log(evn.offsetY);/*事件对象offsetY属性*/
console.log(evn.screenX);/*事件对象screenX属性鼠标指针相对于显示器左上角的位置*/
console.log(evn.screenY);/*事件对象screenY属性*/
console.log(evn.target.nodeName);/*事件对象target属性 事件源，就是发生事件的元素；*/
}
</script>
</body>
</html>
js事件对象的更多相关文章
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
随机推荐
- 三种Dataase Mapping的系统架构
ORM - O/R M - Object/Relational Mapping: A technique/idea used to map objects and thier individual r ...
- octave之奇巧淫技向量化计算实现寻找样本点所属聚类下标
前面有文章提到过,K-means算法,第一步骤是找出样本点的的所属聚类.下面用两种方式实现,一种是普通的循环,一种是完全向量化计算. 假设 : X 是m×n样本矩阵,其每一行是一个样本,m表示样本数目 ...
- html元素被隐藏在后面
当有些html元素是由于某些控件生成的,然后它被隐藏在其他元素的后面,但是它一开始是隐藏的,你无法直接在html或js里修改它的属性:z-index,使其可以放在更前面,这时可以在css里重新定义控件 ...
- LPC1768基本输入输出GPIO使用
LPC1788通用IO口的控制包含了一些基本的组件,比如设置推挽输出,开漏输出,上拉电阻等,我们今天来看看. 首先使用GPIO要打开GPIO的系统时钟 LPC_SC->PCONP |= (1 ...
- 微信小程序实操－image height:auto问题，url地址报错，“不在以下合法域名列表中”问题等
1.修改app顶部title 使用API: wx.setNavigationBarTitle({ title: 'titleName'}); 2.ajax请求 wx.request({ url: 'h ...
- IOS开发－UI学习－UIFont，字体设置及批量创建控件
在IOS 中,使用[UIFont familyNames]这个方法获取72种系统字体. 使用[UIFont fontWithName:@"Zapfino" size:18]这个方法 ...
- js排序算法汇总
JS家的排序算法 十大经典算法排序总结对比 一张图概括: 主流排序算法概览 名词解释: n: 数据规模k:“桶”的个数In-place: 占用常数内存,不占用额外内存Out-place: 占用额外 ...
- MongoDB升级教程
1.排序 sort()方法:其中 1 为升序排列,而-1是用于降序排列. db.col.find({},{"title":1,_id:0}).sort({"likes&q ...
- MongoDB的$type操作符
字段类型定义: db.col.find({"title" : {$type : 2}})
- Jconsole连接远程服务器
本地服务器.win7,安装JDK8 远程服务器:centos6.5 ,tomcat7,java8 配置方法: 1)修改远程服务器的~/tomcat/bin/catalina.sh 文件 在 # -- ...