[TOC] # 4.1什么是事件对象 ~~~ eventTarget.onclick = function (event) { } eventTa rget.addEventListener('click', function (event) {}) ~~~ //这个event就是事件对象，我们还喜欢的写成e或者evt 官方解释: event对象代表事件的状态,比如**键盘按键的状态鼠标的位置、鼠标按钮的状态**。 简单理解:事件发生后,**跟事件相关的一系列信息数据的集合都放到这个对象里面**,这个对象就**是事件对象event**,它有很多属性和方法。 比如: 1.谁绑定了这个事件。 2.鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。 3.键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。 # 4.2事件对象的使用语法 ~~~ eventTarget.onclick = function (event) { //这个event就是事件对象，我们还喜欢的写成e或者evt } eventTarget.addEventListener ('click'，function (event) { //这个event就是事件对象，我们还喜欢的写成e或者evt }) ~~~ 这个event是个形参,系统帮我们设定为事件对象,不需要传递实参过去。 当我们注册事件时，event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数) . # 4.3事件对象的兼容性方案 事件对象本身的获取存在兼容问题: 1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。 2.在IE6~8中,浏览器不会给方法传递参数,如果需要的话,需要到window.event中获取查找。 解决: e = e || window. event; # 4.4事件对象的常见属性和方法 | 事件对象属性方法 | 说明 | | --- | --- | | e.target | 返回触发事件的对象 标准 | | e.srcElement | 返回触发事件的对象 非标准ie6-8使用 | | e.type | 返回事件的类型比如click mouseover 不带on | | e.cancelBubble | 该属性阻止冒泡非标准ie6-8使用 | | e.returnValue | 该属性阻止默认事件(默认行为)非标准ie6-8使用比如不让链接跳转 | | e.preventDefault() | 该方法阻止默认事件(默认行为)标准比如不让链接跳转 | | e.stopPropagation() | 阻止冒泡标准 | //常见事件对象的属性和方法 // 1. e. target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素) //区别: **e.target 点击了那个元素**，就返回那个元素;**this那个元素绑定了这个点击事件，那么就返回谁** ## html 代码 ~~~ <div>123</div> <ul> <li>abc</li> <li>abc</li> <li> abc</li> </ul> ~~~ ## js代码 ~~~ //常见事件对象的属性和方法 // 1. e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素) //区别: e.target 点击了那个元素，就返回那个元素this那个元素绑定了这个点击事件，那么就返回谁 var div = document.querySelector( ' div' ); div.addEventListener('click', function(e) { console.log(e.target); console.log(this); }) var ul = document.querySelector( 'ul'); ul.addEventListener(' click', function(e) { //我们给ul绑定了事件那么this就指向ul console.log(this); // e.target 指向我们点击的那个对象谁触发了这个事件我们点击的是1i e. target 指向的就是1i console.log(e.target); }) ~~~ ## 兼用型 （用传统绑定事件） ~~~ //了解兼容性 // div.onclick = function(e) { // e = e | | window. event; // var target = e.target|l e . srcElement; // console.log(target); ~~~ # 2.了解跟this 有个非常相似的属性currentTarget ie678不认识 # e.type 常见事件对象的属性和方法// 1.返回事件类型 ~~~ <div> 123< /div> <a href="http:/ /wwwj. baidu. com">百度</a> <form action= "http: / /www. baidu. com"> < input type=" submit" value="提 交" name="sub"> </ form> ~~~ ## js 的e.type 常见事件对象的属性和方法// 1.返回事件类型 ~~~ <script> //常见事件对象的属性和方法 // 1.返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener( ' mouseover', fn); div.addEventListener( ' mouseout'，fn); function fn(e) { //返回 方法的属性类型 console.log(e.type); } ~~~ ## // 2.阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交 ~~~ vara=document.querySelector( 'a ' ); a.addEventListener( 'click', function(e) { e.preventDefault(); // dom 标准写法 }) ~~~ ## // 3.传统的注册方式 ~~~ a.onclick = function(e) { //1、普通浏览器e.preventDefault(); 方法 e. preventDefault( ) ; //2、低版本浏览器ie678 returnValue属 性 e.returnValue; //3、我们可以利用return false 也能阻止默认行为没有兼容性问题特点: return 后面的代码不执行了，而且只限于传统的注册方式 return false; //运行完之后就不运行后面的代码 alert(11); } ~~~