在触发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. mysql中 key 、primary key 、unique key 和 index 有什么不同
			
    mysql中 key .primary key .unique key 和 index 有什么不同 key 是数据库的物理结构,它包含两层意义和作用, 一是约束(偏重于约束和规范数据库的结构完整性), ...
    
			
    2. 
						
  2. centos R包 tidyverse安装
			
    tidyverse安装失败,install.packages('tidyverse') 错误原因大概是其中有个依赖包xml2安装不上,解决办法是yum install libxml2-devel,这样 ...
    
			
    3. 
						
  3. PyTestReport使用
			
    PyTestReport详细介绍: https://testerhome.com/opensource_projects/78 示例代码 #coding:utf-8 import os,unittes ...
    
			
    4. 
						
  4. C#调取接口时报错：服务器提交了协议冲突. Section=ResponseStatusLine
			
    private Dictionary<string, Object> GetLocation(string imei) { #region===代码=== string serviceAd ...
    
			
    5. 
						
  5. python3.7.0 安装与配置
			
    python 3.7.0 X64下载地址: https://www.python.org/ftp/python/3.7.0/python-3.7.0-amd64.exe 更多版本下载请移步到:http ...
    
			
    6. 
						
  6. 安装loadrunner11的时候提示'命令行选项语法错误。键入命令 / ?’ 怎么办
			
    重启电脑后再安装.若还是不行就运行安装程序自带的vcredist_x86.exe,在我电脑的安装包的目录是loadrunner-11\lrunner\Kor\prerequisites\vc2005_ ...
    
			
    7. 
						
  7. 微信小程序(一)--微信小程序的介绍
			
    一.微信小程序简介 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无 ...
    
			
    8. 
						
  8. 安装Kubernetes V1.16.2
			
    安装Kubernetes V1.16.2 准备硬件环境 利用VirtualBox准备两台Linux虚拟机(K8S集群2台起步),系统用CentOS(我用的是的CentOS-7-x86_64-DVD-1 ...
    
			
    9. 
						
  9. 前缀和序列 & 差分序列
			
    前缀和序列 所谓前缀和数组,就是从第一个元素到当前元素的和.假设这个前缀和数组为d[],原数组为a[],那么d[ i ] = a[ 1 ]+a[ 2 ]+a[ 3 ]+...+a[ i-1 ]+a[  ...
    
			
    10. 
						
  10. 完美的Linux之【navi】使用笔记
			
    今天要说的是才上线才两天,就已经获得超过1000星.开发者是一位来自巴西的小哥Denis Isidoro. 开发的工具navi Linux用户的日常困惑 新命令 用完就忘 ? 一时想不起来命令的单词怎 ...
    
			
    11.