在触发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. php面试专题---11、开发环境及配置考点
			
    php面试专题---11.开发环境及配置考点 一.总结 一句话总结: 了解php运行原理及常见的配置项 1.版本控制软件? 集中式:CVS和SVN 分布式:Git 2.请简述CGI.FastCGI和P ...
    
			
    2. 
						
  2. PHP7.2中AES加密解密方法mcrypt_module_open()替换方案   Function mcrypt_get_block_size() is deprecated
			
    直接粘代码,该类是基于微信公众号消息加密解密所提供的PHP DEMO改造而来,目前使用于彬彬大学APP接口token校验中. php的mcrypt 扩展已经过时了大约10年,并且用起来很复杂.因此它被 ...
    
			
    3. 
						
  3. 电脑可以识别sd卡手机无法识别   的解决方法。 我成功了。  淘宝买的sd卡  不用退货了。  退的人肝疼
			
    https://wenku.baidu.com/view/822e471055270722192ef736.html 电脑可以识别 sd 卡手机无法识别 * (本教程只是本人实际操作方法,可以解决一部 ...
    
			
    4. 
						
  4. DELPHI 全局变量和局部变量的区别
			
    全局变量: 如果我们在应用程序一个单元中的interface关键字和implementation关键字之间的区域,定义一个全局变量,假如这个单元在别的地方被引用,那么这个单元的全 局变量能够在别的地方 ...
    
			
    5. 
						
  5. Vi 常用命令列表
			
    基本上vi可以分为三种状态,分别是命令模式(command mode).输入模式(Insert mode)和末行模式(last line mode),各模式的功能区分如下: 1) 命令模式(comma ...
    
			
    6. 
						
  6. python +requests 爬虫-爬取图片并进行下载到本地
			
    因为写12306抢票脚本需要用到爬虫技术下载验证码并进行定位点击所以这章主要讲解,爬虫,从网页上爬取图片并进行下载到本地   爬虫实现方式: 1.首先选取你需要的抓取的URL:2.将这些URL放入待抓 ...
    
			
    7. 
						
  7. Python 学习笔记15 类 - 继承
			
    我们在编程的过程中,并非都是要重头开始.比如其他人已经有现成的类,我们可以使用其他找人编写的类.术语称之为: 继承. 当一个类继承例外一个类时,它可以获得这个类的所有属性和方法:原有的类称之为 父类, ...
    
			
    8. 
						
  8. call,apply,bind的用法和细节差异
			
    call,apply,bind的用法 call,apply和bind都用来改变js中this对象的指向 var dog = { name:'dog', speak: function(value){  ...
    
			
    9. 
						
  9. mysql 5.7 创建函数报错，This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creat
			
    今天用命令创建函数, 报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration  ...
    
			
    10. 
						
  10. <转载>面试官，不要再问我三次握手和四次挥手
			
    版权声明:本文为CSDN博主「夏雪冬日」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/hyg0811/a ...
    
			
    11.