在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

<body>

    <a href="http://www.baidu.com">baidu</a>

    <div class="box">

        我是div

        <div class="son">son</div>

    </div>

    <script>

        var box = document.querySelector('.box');

//        事件对象的兼容写法var e = e || window.event; // 或var e = e || event

        box.onclick = function(e) { // e是形参

            var e = e || window.event; // 或var e = e || event

            // event是事件对象 ie6-8通过window.event来获取事件对象

            console.log(e); // window.event

            console.log(e.target);// 触发事件的元素 var target = e.target || e.srcElement

            console.log(this); // 绑定事件的对象

        }

        // box.onmouseover = fn;

        // box.onmouseout = fn;

        function fn(e) {

            var e = e || window.event;

            console.log(e.type);

        }

        // 阻止浏览器的默认行为 比如链接跳转 e.preventDefault()或return false;

        var a = document.querySelector('a');

        a.onclick = function(e) {

            var e = e || window.event;

            console.log('hello');

            // 阻止浏览器的默认行为 比如链接跳转 ie6-8 returnValue属性 e.returnValue

            //e.preventDefault();

            return false; // 也可以阻止默认行为 且没有兼容性问题

        }

    </script>

</body>






event常用属性：
1.event.type;——获取绑定的事件类型，比如click，mouseover等
2.event.target;（在ie低版本中用event.srcElement）——返回触发事件的元素。
比如[object HTMLInputElement]指的是html里的input元素
3.event.stopPropagation()[ˌprɒpə'ɡeɪʃn];（在ie中用oEvent.cancelBubble=false）//用于阻止事件冒泡
4.event.stopImmediatePropagation();//Immediate[ɪˈmi:diət] //当一个元素绑定多个事件处理程序的时候，
事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，
就不执行后面的事件处理程序了。
5.event.preventDefault();（在ie低版本中用oEvent.returnValue=true）
//阻止事件的默认行为，比如阻止a的href链接。


 


 
												


											
js 事件对象event的更多相关文章
	

    
								
  1. js进阶课程 12-9 jquery的事件对象event的方法有哪些？
		
    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
    
		
    2. 
						
  2. JS—事件对象
		
    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
    
		
    3. 
						
  3. JavaScript学习06 JS事件对象
		
    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
    
		
    4. 
						
  4. JavaScript：事件对象Event和冒泡
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
    
		
    5. 
						
  5. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
		
    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
    
		
    6. 
						
  6. Javascript和jquery事件--事件对象event
		
    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...
    
		
    7. 
						
  7. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
		
    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
    
		
    8. 
						
  8. 重新审视事件对象event
		
    前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之.  ...
    
		
    9. 
						
  9. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
		
    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ORA-02298问题处理
			
    参考:http://blog.163.com/yvtong@126/blog/static/8753524720132223343722/ ORA-39083: Object type REF_CON ...
    
			
    2. 
						
  2. PHP 常用算法【总结】
			
    一.声明数组 ini_set("max_execution_time", "12000"); $arr = [2,4,1,7,33,4,5,6,7,11,1,0 ...
    
			
    3. 
						
  3. Jenkins+Gitlab+自动化测试配置持续集成
			
    Jenkins安装在win7上 GitLab安装在docker上 需求:本地提交自动化测试代码在gitlab上后,jenkins自动构建,拉下新提交的自动化代码,并且运行 参考的链接: https:/ ...
    
			
    4. 
						
  4. 【转载】Spring boot学习记录（一）-入门篇
			
    前言:本系列文章非本人原创,转自:http://tengj.top/2017/04/24/springboot0/ 正文 首先声明,Spring Boot不是一门新技术.从本质上来说,Spring B ...
    
			
    5. 
						
  5. 2017/2/27-Laravel_资源控制器命令
			
    用于处理关于图片存储的 HTTP 请求,使用 Artisan 命令 make:controller,我们可以快速创建这样的控制器 : php artisan make:controller Photo ...
    
			
    6. 
						
  6. 16/7/14-MySQL-关键字
			
    Mysql 关键字-保留字 转载:http://linux.it.net.cn/e/data/mysql/2014/1202/9460.html 时间:2014-12-02 13:09来源:linux ...
    
			
    7. 
						
  7. 报错：Uncaught SyntaxError: Unexpected token）
			
    用JSON格式传值时,js一直 报这个错误:Uncaught SyntaxError: Unexpected token) 错误位置是:result=eval('('+result+')'): 原因: ...
    
			
    8. 
						
  8. Pikachu漏洞练习平台实验——SQL注入（四）
			
    1.概述 1.1发生原因 SQL注入漏洞,主要是开发人员在构建代码时,没有对输入边界进行安全考虑,导致攻击者可以通过合法的输入点提交一些精心构造的语句,从而欺骗后台数据库对其进行执行,导致数据库信息泄 ...
    
			
    9. 
						
  9. vs code配置C/C++开发环境
			
    第一步:下载 Vs Code 点击链接下载Vs Code 下载版本  并安装 https://code.visualstudio.com/ 点击 Download for Windwos 安装时  如 ...
    
			
    10. 
						
  10. SAS去空格
			
    data test;       x="  aaa     bbb hahaha";       x1=compress(x);       x2=left(x);       p ...
    
			
    11.