在触发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. <!DOCTYPE>是什么
			
    所有浏览器都支持<!DOCTYPE> 概念 是指web浏览器关于页面使用哪个html版本进行编写的指令. 常用DOCTYPE声明 html 5 <!DOCTYPE html>  ...
    
			
    2. 
						
  2. ZOJ 3329 One Person Game（概率DP，求期望）
			
    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3754 题目大意: 有三个骰子,分别有K1,K2,K3个面,一次投掷可以得到三个 ...
    
			
    3. 
						
  3. Only variables should be passed by reference
			
    报错位置代码: $status->type = array_pop(explode('\\',$status->type))   (此处$status->type值原本是  APP\ ...
    
			
    4. 
						
  4. PHP不使用内置函数intval()，实现字符串转整数
			
    平时我们用PHP时,将字符串转化为整型时,一般都是使用 intval() 内置函数,那么如果我们自己写,怎么写一个呢? 此时我们可以利用 ASCII 码计算得整数的特性,因为每个字符都对应一个 ASC ...
    
			
    5. 
						
  5. 牛客提高D6t2 破碎的序列
			
    分析 我们不难发现对于偶数的情况只要相邻两个数不相等即可 而对于奇数的情况只要中间恰好隔一个数的两个数不相等即可 于是我们又dp[i][0/1]表示考虑到第i位,这一位和它后面离它最近的一个确定的数是 ...
    
			
    6. 
						
  6. day15—jQuery UI之widgets插件
			
    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...
    
			
    7. 
						
  7. 【OPCAutomation】 使用OPCAutomation实现对OPC数据的访问
			
    折腾了一段时间研究OPC,理清了下位机.OPCServer 和OPCClient的关系和通信模型,终于能够来写一篇相关的博客了. 我们使用西门子的 S7 200 SMART作为下位机端,通过3G路由器 ...
    
			
    8. 
						
  8. 使用 Vagrant 搭建 Kubernetes 本地测试环境
			
    Vagrant 中文资料 参考资料 Kubernetes 需要一个至少包含三个节点的分布式系统.如果想学习 Kubernetes,或只是在本地搭建测试环境,则可以通过 Vagrant 来简单的实现.  ...
    
			
    9. 
						
  9. vue-slot的使用
			
    父组件在子组件内套的内容,是不显示的:vue有一套内容分发的的API,<slot>作为内容分发的出口,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如 ...
    
			
    10. 
						
  10. JavaScript 高级程序设计（第3版）第二章 （在html中使用js）
			
    1.script元素的属性(6个):①async(异步脚本),只对外部脚本有效 ②defer(延迟脚本),只对外部脚本有效 ③charset,src(可跨域),type,language 2.尽可能使 ...
    
			
    11.