JS 事件

JS事件：

事件：Event… 简单来说就是一件事。

1.首先事件不会自己执行，需要触发之后才可以执行，不触发是不会执行的。

2.事件三要素：

1）事件对象           事件的绑定者
2）事件名称      on-事件名  例如：onclick
3）事件处理函数

3.事件发展历史

1）早期事件写法
将事件以属性的形式添加到HTML标签中。
优点：简单易懂
缺点：HTML和JS混在一起不利于多人协助

实例：

<button onclick="console.log('hello');console.log('world');" onmouseover="console.log('你好');">按钮</button>

    <button onclick="show()">另一个按钮</button>
    <script>
        function show() {
            for (var i = 0; i < 5; i++) {
                console.log('hello world');
            }
        }
    </script>
//这里就是将事件以属性的形式写在了HTML标签中；

2.脚本模型(现代事件绑定)

在JS中完成事件的绑定，
obj.on-事件名=事件函数，
有利于多人协作。

实例：
    <img src="images/2.jpg" alt="">

    <script>
        var oImg=document.getElementsByTagName('img')[0];
        //添加事件
        oImg.onmouseenter=function(){
            this.src="images/1.jpg";
            this.style.border="1px solid red";
        };
        //离开时
        oImg.onmouseleave=function(){
            this.src="images/2.jpg";
            this.style.border='none';
        };
    
    </script>
    //完全在JS中完成

3. W3C事件：

            添加事件： addEventListener(事件名,fn,false) 
            移除事件： removeEventListener(事件名,fn,false) 

    <button>点击</button>
    <button>移除按钮1点击事件</button>
    <script>
        var btn = document.querySelector('button');
        //添加事件
           var fn1 = function () {
          console.log('click');
        };//在这个要定义一个变量保存函数  保证移除的事件处理函数和添加时是同一个函数
       btn.addEventListener('click',fn1,false);

        btn.addEventListener('mouseenter', function () {
            console.log('enter');
        }, false);

        btn.addEventListener('mouseleave', function () {
            console.log('leave');
        }, false);


        //按钮2点击事件
        document.querySelectorAll('button')[1].addEventListener('click', function () {
          btn.removeEventListener('click',fn1,false);
        }, false);
          </script>

注意：

移除事件时，保证移除的事件处理函数和添加时是同一个函数。