JavaScript的耳朵——事件函数

0.前言

终于可以写事件函数了，心情小激动，如果说前面讲的知识点是死的，那么现在开始，就是活的。活了废话不多说，来将内容。

1.事件处理程序

事件：用户和浏览器执行的操作。
事件处理程序：响应事件的函数。
以下图片是事件类型：

事件类型.png

那么给事件添加事件处理程序，有几种方式呢？我们一起来看看

（1）直接在HTML标签中给同名的事件处理程序赋值相应的JS代码

<button onclick="this.innerHTML = '辉哥'">按钮一</button>

注意：this：引用，此时代表的是元素节点,不能移除事件

（2）在HTML标签中给同名的事件处理程序赋值相应的函数调用

<button onclick="func2(this)">按钮二</button>

在js程序中添加如下代码：

function func2(obj) {
        console.log("事件二");

        console.log(this);

        console.log(obj);
    }

捕获.PNG

注意：this：引用，此时代表的是window,不能移除事件

（3）DOM0级事件处理

优点：做到了JS代码与HTML代码完全分离
前提：需要能在JS代码中找到相应的元素节点

<button id="but3">按钮三</button>

js代码中：

var jsBut3 = document.getElementById("but3");
        jsBut3.onclick = func3;
        function func3() {
            console.log("sunck is a good man");

            console.log(this);
        }

注意：this：代表的是当前元素节点,可以移除
移除公式：**元素节点 . 事件处理程序 = null;
**

jsBut3.onclick = null;

扩展：funcElse

jsBut3.onclick = funcElse;
        function funcElse() {
            console.log("else");
        }

注意：此时添加的事件会覆盖上一个事件

（4）DOM2级事件处理

目前应用比较广泛，各大主流浏览器厂商都支持

<button id="but4">按钮4</button>

js中的代码：

var jsBut4 = document.getElementById("but4");
        jsBut4.addEventListener("click", func4, false);
        function func4() {
            console.log("sunck is a handsome man");

            console.log(this);
        }
        //可以添加多个事件处理程序，多个事件相互不影响
        jsBut4.addEventListener("click", func5, false);
        function func5() {
            console.log("Yes, you are very right!");
        }

添加事件监听的公式：
元素节点 . addEventListener(事件名，响应时间的函数，事件流)；
事件流一般设置为false
注意：this：代表的是当前元素节点,可以移除
移除公式：元素节点 . removeEventListener(事件名, 函数名, 事件流)
移除时需要的注意：

1、函数的参数要与添加时一致
2、响应事件的函数不能是匿名函数

2.总结

今天主要是想让大家了解一下事件程序，什么是事件程序？希望对大家有所帮助。谢谢！！！！

最后编辑于：2017.12.04 22:26:41

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

JavaScript的耳朵——事件函数