js事件3-事件对象
对于每次点击一个事件，都会产生一个事件对象，这个事件对象中包含了这个事件的很多信息
我们来看看事件对象具体有哪些信息
Object.onclick=function(e){
.....
}其中的参数e就是事件对象，我们可以将事件对象当做参数传入到函数中去
事件对象具有几种属性，几种方法(这里面也存在事件兼容的问题奥)
对于火狐，chrome浏览器来说
我们先简要介绍几个属性
比如type属性
Object.onclick=function(e){
alert(e.type);//结果是click表示的是点击事件
alert(e.target);//返回的是你这个事件加载在哪个目标上，就返回哪个目标，指的是事件的被加载的目标。
}
它还具有两个比较重要的方法
阻止事件冒泡：stopPropagation();
阻止事件默认属性：preventDefault();
通过下面的例子来说说明一下这两个函数的意思
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="shijian.js"></script>
</head>
<body>
<div id="div1">
<input type="button" id="btn1" value="点击1"/>
<input type="button" id="btn2" value="点击2"/>
<input type="button" id="btn3" value="点击3"/>
<a href="http://www.imooc.com" id="go">aaaa</a> </div>
</body>
</html>
shijian.js
window.onload=function(){
var go=document.getElementById("go");
var div1=document.getElementById("div1");
go.onclick=function(e){
alert("点击了链接事件");
document.write("事件类型:"+e.type+"事件目标："+e.target);
e.stopPropagation();
e.preventDefault();
}
div1.onclick=function(e){
alert("事件冒泡到这里");
document.write("事件类型:"+e.type+"事件目标："+e.target);
}
如果我们点击了链接，就会触发点击事件，然后会弹出对话框"你点击了链接事件" document中会输出"事件类型:click 事件目标：document.element.a之类的
然后事件会冒泡到div上，但是我们设置了阻止事件冒泡，所以此点击事件就不会冒泡到div上。然后由于我们点击的是链接，按照常理页面会跳转到链接中的href中的地址位置，但是我们设置了阻止默认事件，也就是，链接的默认事件是你点击它，它就跳转到相应的位置，但是由于我们设置了阻止默认事件，所以他就不跳转了。
还有其他的一些属性和方法，我就不具体说明了。
有的同学发现上面的有些在IE中没有作用？这是为什么呢？，因为我们这里是DOM事件，所以在IE中是不兼容的，好的。那我们来看看IE中是如果操作的
2.IE 中的事件对象
获取事件类型的方式也是e.type;
获取事件对象：e.srcElement
注意IE中的阻止冒泡和阻止默认事件也都是属性，不是函数
阻止冒泡：e.cancelBubble=true;
阻止默认事件：e.returnValue=false;false表示阻止默认事件是启动的。true表示没有启动阻止默认事件。
还有一点，就是我们获取对象也是存在浏览器兼容的问题。那么我们只要兼容一下就可以了
Object.onclick=function(e){
e=e||window.event;//这句话就解决了浏览器兼容的问题。
}
3.最后我们把这些属性，方法也封装到一个对象中：
var jianrong={
addEvent:function(objectname,eventname,func){
if(objectname.addEventListener){
objectname.addEventListener(eventname,func,false);
}else if(objectname.attachEvent){
objectname.attachEvent("on"+eventname,func);
}else{
objectname["on"+eventname]=func;
}
},
removeEvent:function(objectname,eventname,func){
if(objectname.addEventListener){
objectname.removeEventListener(eventname,func,false);
}else if(objectname.attachEvent){
objectname.detachEvent("on"+eventname,func);
}else{
objectname["on"+eventname]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
js事件3-事件对象的更多相关文章
- JS 事件与事件对象小结
JavaScript与HTML之间的交互是通过事件来实现的.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留 ...
- js中的事件，内置对象，正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- js笔记19 事件对象
1.常用的事件 onmouseover onmouseout onmousedown onmousemove onmouseup onclick onchange onfocus o ...
- js事件处理、事件对象
事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...
- 【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
- JS HTML DOM 事件对象(onclick、onmouseenter)
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM: ...
- JS事件-对象监视事件，事件触发函数
写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click() 鼠标单击 dblclick() ...
随机推荐
- MySQL统计百分比结果
1,不带小数点的百分比 SELECT CONCAT(ROUND(errorTable.errorCount / totalTable.totalCount * 100),'','%') FROM (S ...
- 【Gamma】测试报告
测试方法及过程 在正式发布前,我们对后端代码.前后端接口.服务器以及前端的页面和功能做了多种测试,主要包括对后端代码的单元测试.针对接口的测试.压力测试以及功能测试. 后端代码单元测试 该部分测试主要 ...
- [Gamma]Scrum Meeting#6
github 本次会议项目由PM召开,时间为6月1日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...
- 使用Prometheus监控snmp
获取snmp信息 首先获取需要监控的snmp的基本信息,假设基本信息如下: snmp服务IP: 1.1.1.1 snmp community: public snmp exportor部署地址: 2. ...
- Ansible14：Playbook条件语句
目录 简介 when关键字 1. when基本使用 2. 比较运算符 3. 逻辑运算符 条件判断与tests 判断变量 判断执行结果 判断路径 判断字符串 判断整除 其他tests 条件判断与bloc ...
- 从有序矩阵M x N中找出是否包含某一个数，要求时间复杂度为O(M+N)
有序指的是每行从左到右依次变大,每列从上到下依次变大 思路: 从右上顶点开始依次判断当前值与给定值的大小,往左下顶点移动,结束条件是下标超过范围 public class FindNumInOrder ...
- SQLServer字符串与数字拼接
1.使用cast‘’+cast(@ID as varchar) 2.使用LTrim‘’+LTrim(@ID) 感觉第二种方式代码简单,但是可读性不好.
- poi根据excel模板导出Excel
/****单元格值对象**/public class Cells { /*** * 行 */ private int row; /** * 列 */ private int column; /** * ...
- Sitecore 8.2 Admin用户帐户解锁
如果您有权访问数据库,则可以使用SQL Management Studio运行以下查询来解锁您的sitecore管理员或任何其他用户帐户 : UPDATE aspnet_Membership SET ...
- python之路——阅读目录
阅读目录 希望大家多多交流,有错误的地方请随时指正,笔记记得可能有点杂 一.python入门 计算机基础 编程语言发展史和python安装 二.数据类型.字符编码.文件处理 python基础数据类型 ...