JS的DOM操作——事件对象

事件触发时，handler函数内部会传入数据，这个数据就是事件对象。

事件的绑定方式有三种，行内绑定、属性绑定、监听器绑定。

其中是行内绑定时，行内无法获取事件对象；属性绑定和监听器绑定时，事件对象在参数中。

那么如何解决行内无法获取事件呢？

我们采用兼容写法，不管是那种方法触发的，我们都先判断判断一下参数e,

e=(e.constructor==PointerEvent&&e)||window.event//兼容写法

代码展示：

        <div class=".test" onclick="fn1()">
				111
		</div>
		<script>
			
			function fn1(e){
				e=(e.constructor==PointerEvent&&e)||window.event//兼容写法
				console.log(e);
			}
        </script>

 打印结果：

展示一下属性绑定和监听器绑定时获取事件对象：

        <div class="boxx">111</div>
		<script>
			var boxx=document.querySelector(".boxx")
			boxx.onclick=function(e){
				console.log(e);
			}
            boxx.addEventListener("click",function(e){
				console.log(e);
			})
        </script>

 运行结果可见，事件触发时，产生的数据会传入处理函数，这个数据正是我们需要的事件对象。

 我们还需了解事件中的this：

在行内绑定中：函数的调用者为window

在属性绑定中：this指向的是dom元素本身

在监听器绑定中：this指向的是dom元素本身