在触发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. 【JavaScript】DOM之事件
			
    DOM 事件 1.事件是什么 让JS知道程序用户行为,比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作 <script> var button = document.get ...
    
			
    2. 
						
  2. php基础/类型
			
    1.php的格式: <?php ?> 内嵌格式: <? ?> (php可以写在html文件里面) 2.php的输出:echo (每段的结束必须加;) 3.定义变量: 不需要管他 ...
    
			
    3. 
						
  3. Eclipse总是自动跳到ThreadPoolExecutor
			
    出现这种状况是因为Eclipse默认开启挂起未捕获的异常(Suspend execution on uncaught exceptions),只要关闭此项就可以了.解决方法:在eclipse中选择Wi ...
    
			
    4. 
						
  4. 同余dp
			
    先验知识: 余数的计算公式:c = a -⌊ a/b⌋ * b 其中,⌊ ⌋为向下取整运算符,向下取整运算称为Floor,用数学符号⌊ ⌋表示 题目: Consider an arbitrary se ...
    
			
    5. 
						
  5. 2019年Java Web最流行的开发框架总结
			
    ORM型框架:对数据进行持久化操作,例如:基于SQL的MyBatis框架和Hibernate框架. MVC型框架:从逻辑上分为视图层,控制层,模型层,各层各司其职,之间是相互调用的关系,而不是相互依赖 ...
    
			
    6. 
						
  6. 【春训团队赛第四场】补题 | MST上倍增 | LCA | DAG上最长路 | 思维 | 素数筛 | 找规律 | 计几 | 背包 | 并查集
			
    春训团队赛第四场 ID A B C D E F G H I J K L M AC O O O O O O O O O 补题 ? ? O O 传送门 题目链接(CF Gym102021) 题解链接(pd ...
    
			
    7. 
						
  7. mysql 数据库表结构对比语句
			
    判断两个数据库互相不存在的表 select a.TABLE_SCHEMA,a.TABLE_NAME from information_schema.TABLES a where a.TABLE_SCH ...
    
			
    8. 
						
  8. javaScript Map
			
                  }                   } }                          vertices.push(v);         adjList.set ...
    
			
    9. 
						
  9. [Python3 填坑] 015 __str__ 与 __repr__ 的区别
			
    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 上例子 2.2 关系与区别 Python 3.7.3 的官方文档 网上看到一个例子,运行了一下 简单地说 1. print( 坑的信息  ...
    
			
    10. 
						
  10. HDFS-Suffle
			
    一.Shuffle机制 1.官网图 2.MR确保每个Reducer的输入都是按照key排序的.系统执行排序的过程(即将Mapper输出作为输入传给Reducer)成为Shuffle 二.Partiti ...
    
			
    11.