对于每次点击一个事件，都会产生一个事件对象，这个事件对象中包含了这个事件的很多信息

我们来看看事件对象具体有哪些信息

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-事件对象的更多相关文章

  1. JS 事件与事件对象小结

    JavaScript与HTML之间的交互是通过事件来实现的.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留 ...

  2. js中的事件，内置对象，正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  3. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  4. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  5. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. js笔记19 事件对象

    1.常用的事件 onmouseover  onmouseout  onmousedown  onmousemove  onmouseup   onclick  onchange  onfocus  o ...

  7. js事件处理、事件对象

    事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...

  8. 【js】event(事件对象)详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  9. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  10. JS事件-对象监视事件，事件触发函数

    写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()  ...

随机推荐

  1. 微信小程序跳转函数总结

    微信小程序跳转函数总结 ​ 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...

  2. Java编程思想之十 内部类

    可以将一个类定义放在另一个类的定义内部,这就是内部类. 10.1 创建内部类 创建内部类就是把类的定义置于外部类里面. public class Parcell { class contents{ i ...

  3. .net core + xunit 集成测试

    xunit地址:https://github.com/xunit/xunit 一.利用请求来测试接口,主要是测试webapi控制器方法 ①添加xunit项目 ,然后引用我们的主项目,nuget: Mi ...

  4. c语言数据结构之线性表的顺序存储结构

    线性表,即线性存储结构,将具有“一对一”关系的数据“线性”地存储到物理空间中,这种存储结构就称为线性存储结构,简称线性表. 注意:使用线性表存储的数据,要求数据类型必须一致,线性表存储的数据,要么全不 ...

  5. -Shell 命令行工具 Cmder Babun Zsh MD

    目录 目录 Cmder:window 下增强型的 cmd + bash 简介 配置 解决中文乱码问题 添加到右键菜单 添加至环境变量 修改命令提示符号 自定义aliases Readme.md 设置c ...

  6. RGB的光的三原色、品红黄青颜料的三原色

    学习了祁连山老师讲的光与色的基础知识,觉得收获颇多,所以记下来光与色的知识点. 首先提问大家一个问题:照片中物体的颜色就是它的固有色么?(请从色光和物体固有色的角度回答) 这个问题在看完下面的总结后相 ...

  7. “分而治之”，一种AI和动画系统的架构

    译者注:随着国内游戏研发水平的不断提高,对画面品质的不断提升,同时大量手游使用Unity和Unreal 4等成熟的工具开发,动作状态机已经不是什么陌生的概念了.我们在项目开发时也大量使用了动作状态机. ...

  8. 【转载】C#中ArrayList集合类使用RemoveAt方法移除指定索引的元素

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,任何数据类型的变量都可加入到同一个ArrayList集合中,在Array ...

  9. vue.js 如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  10. android中fragment卡顿的原因

    首页的ViewPager有十几个Fragment,在快速切换的时候,容易产生卡顿现象. 二.分析当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快 ...