DOM operation of JS -- event object

Event triggered ,handler Data will be passed in the function , This data is the event object .

There are three ways to bind events , In line binding 、 Attribute binding 、 Listener binding .

Where is the intra row binding , Cannot get event object in line ; Property binding and listener binding , The event object is in the parameter .

So how to solve the problem that events cannot be obtained in the line ？

We use compatible writing , No matter which method triggers , Let's judge the parameters first e,

e=(e.constructor==PointerEvent&&e)||window.event// Compatible writing

Code display ：

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

  Print the results ：

Show me how to get event objects when Binding attributes and listeners ：

        <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>

  The running results are visible , Event triggered , The generated data will be passed into the processing function , This data is exactly the event object we need .

  We also need to know about this：

In intra row binding ： The caller of the function is window

In property binding ：this Pointing to dom The element itself

In the listener binding ：this Pointing to dom The element itself