JS中的事件、event对象、target属性、绑定事件的方法、添加和移除事件、addEventListener()和attachEvent（）

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。

一、JS中的事件

1、什么是事件？

事件是发生并得到处理的操作，即：事情来了，然后处理。如： 1、电话铃声响起（事件发生），需要接电话（处理） 2、学生举手请教问题（有事了），需要解答（处理） 3、我被人打了，我就得处理。 4、按钮被点击了，然后对应有处理代码（一般是函数） 5、光标进入文本框的区域了，然后对应一个函数来处理。

在js中，事件：事件源.事件类型=事件处理函数

事件触发：当用户点击按钮时，我们就说，触发了按钮的onclick事件事件处理函数是异步的

		document.onclick = function () {  
            console.log(666);
            return 
            console.log(777);
        }

这个匿名函数是在事件发生以后，由系统调用一般事件处理函数没有特定的返回值 , 但是也可以使用return 事件处理函数的第一个参数表示的是事件对象，事件对象是用户记录事情发生的整个过程。事件处理函数只有一个参数：

		document.onclick = function (a , b) {  
            console.log(a);
            // 事件处理函数只有一个参数
            console.log(b);  // undefined
        }

2、event对象

一个事件一般包括：事件源（触发事件的元素，如：按钮），鼠标的位置及状态、按下的键，事件发生的时间等。而这些信息都属于event对象的属性。（什么时间，发生了什么事情，发生在谁身上等等） event对象只在事件发生（如：点击事件）的过程中才有效。如：当点击按钮时，就会自动产生event对象。event对象是自带的对象，是固定写法。在W3C标准中，直接在函数中声明该参数即可

btn.onclick = function(event) { //event在调用和函数定义时，都写上也是考虑兼容问题
	//这里就可以使用了
};
兼容性写法，支持老版本的IE
var evt = event ? event : window.event;
var evt = event || window.event;

event的一些属性：

event.type  //当前事件类型

event.clientX/event.clientY  //鼠标触发点距离可视区

event.pageX/event.pageY  //鼠标触发点距离整个屏幕左上角的x/y轴坐标

event.offsetX/event.offsetY   //鼠标触发点距离当前触发元素左上角的x/y轴坐标

target属性

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素获取当前操作的事件源语法: event.target 栗子：

<body>
    <div class="a">
        <p>ppp</p>
        <h3>333</h3>
    </div>
    <div class="b">
        <h3>h3</h3>
        <span>span</span>
    </div>
    <script>
        document.onclick = function (e) {  
            e = e || event ;
            // target目标  --- 具体是由哪个标签触发的
            console.log(e.target); //返回当前点击标签
            // this 指向事件源
            console.log(this);
            console.log(e.clientX);
        }
    </script>   
</body>

点击ppp返回值如下：在这里插入图片描述

3、绑定事件的方法

绑定事件的方式：

行内js onclick="fn()"
事件绑定 oDiv.onclick = function( ){ } ---会覆盖
事件监听 oDiv.addEventListener(类型,事件处理函数) --- 不会覆盖栗子：行内：

<div class="a" onclick="fn(6)">aaaaaaaa</div>

<script>
	function fn(n) {  
            console.log(n);
    }
</script>

事件绑定：

		var oDiv = document.querySelector('.a') ;
        oDiv.onclick = function () {  
            console.log(1);
        }

        // 后面的时间覆盖前面的
        oDiv.onclick = function () {  
            console.log(2);
        }

事件监听：

		//不会覆盖
		oDiv.addEventListener('click',function () {  
            console.log(4);
        })
        oDiv.addEventListener('click',function () {  
            console.log(5);
        })

        oDiv.attachEvent('onclick' , function () {  
            console.log(6);
        })

		fn(oDiv , 'click' , function () {  
            console.log(4);
        })

        function fn(ele , type , cb) {  
            // 先判断window对象下是否存在这个方法
            if(window.addEventListener) {
                ele.addEventListener(type,cb)
            } else {
                ele.attachEvent('on' + type , cb)
            }
        }

4、添加和移除事件

行内js和普通事件绑定都可以通过重新赋值的方式，以覆盖的方式进行移除（赋值为null）
事件监听的方式，需要写成具名函数才能被移除(注意：移除的时候，需要一个一个的移除) removeEventListener()

行内和普通事件绑定

		oDiv.onclick = function () {  
            console.log(777);
        }
        //移除
        // onclick 重新赋值(任意值都可以)  一般建议写null
        oDiv.onclick = null ;

事件监听

		oDiv.addEventListener('click' , fn)  //添加

        oDiv.addEventListener('click' , fn2)

        oDiv.removeEventListener('click' , fn)  //移除

        oDiv.removeEventListener('click' , fn2)

		function fn2() {  
            console.log(999);
        }

        function fn() {  
            console.log(666);
        }

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

addEventListener()

addEventListener共有3个参数，如下所示： element.addEventListener(type,listener,useCapture);

element                要绑定事件的对象，及HTML节点。
type                   事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”。
listener               要绑定的事件监听函数，注意只写函数名，不要带括号。
useCapture			   两个值：
						false（默认值）： 就是事件冒泡了 从子元素到父元素
              			true  ： 就是事件捕获 从父到子

attachEvent（）

attachEvent共有2个参数，如下所示： element.attachEvent(type,listener)；

element           要绑定事件的对象，及HTML节点。
type              事件名称，注意加上事件前边的“on”，比如“onclick”和“onmouseover”，这是与addEventListener的区别。
listener          要绑定的事件监听函数，注意只写函数名，不要带括号。

// 封装事件监听
        function addEvent(ele , type , cb) //cb回调函数
        {  
            if(window.addEventListener) {
                ele.addEventListener(type , cb)
            } else {
                ele.attachEvent('on' + type , cb)
            }
        }

与上述添加事件方法相同，对应的移除事件为removeEventListener和detachEvent

参数类型相同，此处不在赘述

//封装移除事件监听
        function removeEvent(ele , type , cb) {  
            if(window.removeEventListener) {
                ele.removeEventListener(type , cb)
            } else {
                ele.detachEvent('on' + type , cb)
            }
        }