事件对象是我们一系列我们事件相关数据的集合,如果是该事件是点击事件 ,则事件对象就包含了点击事件的相关数据,例如点击的坐标等等。
我们在注册事件时的两个方法,不论是 element.οnclick=function(){},或者是element.addEventListener(“onclick”,function()),他们的侦听函数的括号里始终是空着的,这个地方其实是用来放事件对象的,事件对象我们称为 event(可以自己命名),普遍简称为 e 即可,在括号里当做形参来看。在 ie678 浏览器版本不支持 e 或者 event 的写法,只能够识别 window.event,所以为了兼容性,我们要学会兼容性的写法。另外事件对象在有了事件之后才会存在,是系统自动创建的,不需要我们去传递参数
事件对象是包含了一系列事件数据信息的集合:
1.<div>111</div><script>varele=document.querySelector('div'); ele.addEventListener('click',function(event){ console.log(event); }) </script>
兼容性写法:
由于ie678版本的浏览器不支持 event,e 等等,只能写成 window.event,所以为了让所有浏览器都兼容,我们可以写一个判断赋值的兼容写法:
ele.addEventListener('click',function(e){ e=e||window.event; console.log(e); })
e.target 和 this 的区别
e.target 返回的是触发事件的元素,this 返回的是绑定注册事件的元素
<ul><li>111</li><li>222</li></ul><script>varul=document.querySelector('ul'); ul.addEventListener('click',function(e){ console.log(e.target); console.log(this); }) </script>
这串代码中我们绑定注册事件用的是 ul ,而我们点击 li 标签后输出 e.target 结果为当前触发事件的元素,即 li,用 this 输出后结果为绑定事件的元素 ul ,这就是二者的区别