JavaScript事件02——事件处理程序

作者: 葵自渡_ | 来源:发表于2019-07-25 14:26 被阅读0次

JavaScript事件02——事件处理程序
带你深入理解DOM0级事件处理程序！！！
DOM0级事件处理及DOM2级事件处理
js 事件委托事件代理
DOM事件委托
DOM 事件委托
JavaScript事件处理程序
【javascript】事件处理程序
javascript 事件处理程序
JS 事件

大纲：

概念（事件处理程序）

事件处理程序（HTML事件，DOM0级，DOM2级，IE事件，跨浏览器）

一、概念：

1、事件：
事件就是用户或浏览器自身执行的某种动作。比如click，load等
2、事件处理程序：
响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。所以，click是事件处理程序就是onclick

二、事件处理程序

1、HTML事件处理程序

什么是HTML事件处理程序？

简单的说，就是事件处理程序放在HTML标签中的。

两种方式：
直接在HTML标签里调用脚本

<input type="button" value="按钮" onclick="alert('点击')">

直接在HTML标签里调用其他地方定义的脚本

<body>
    <div>
        <input type="button" value="按钮" onclick="showName()">
    </div>
</body>
<script type="text/javascript">
    function showName(){
        alert('bree')
    }
</script>

缺点：

HTML和js代码紧密的耦合在一起，一旦需要修改，JS代码和HTML都需要修改

2、DOM0级事件处理程序

什么是DOM0级事件处理程序：

就是将一个函数赋值给一个事件处理程序属性。比较传统的方式

思路：

1、给按钮设置id为btn
2、获取btn，给btn绑定onclick属性

例子：
绑定DOM0级事件处理程序

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    //给btn绑定onclick属性
    btn.onclick= function(){
        alert('这是DOM0级事件处理程序')
    }
</script>

删除DOM0级事件处理程序

btn.onclick = null;

3、DOM2级事件处理程序

两个方法：

1、addEventListener(type，fn，false/true) 用来添加事件
2、removeEventListener(type，fn，false/true) 用来删除事件

参数说明：

1、type:事件名字
2、fn：作为事件处理程序的函数
3、布尔值，false代表事件冒泡，true代表事件捕获

思路：

1、先获取btn
2、给btn绑定addEventListener()

例子：
使用addEventListener()方法绑定click事件

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener("click",function(){
        alert('这是DOM2级事件处理程序')
    },false)
</script>

使用removeEventListener()方法移除click事件

    var btn = document.getElementById('btn');
    btn.addEventListener("click",function(){
        alert('这是DOM2级事件处理程序')
    },false)
    btn.removeEventListener("click",function(){
        alert('这是DOM2级事件处理程序')
    },false)

上面移除事件并没有效果，这是因为removeEventListener()方法里的函数和addEventListener()方法里的函数并不是同一个函数。

声明一个函数showInfo，把函数名传入两个方法内，这样就解决了

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    function showInfo(){
        alert('这是DOM2级事件处理程序')
    }
    var btn = document.getElementById('btn');
    btn.addEventListener("click",showInfo,false)
    btn.removeEventListener("click",showInfo,false)
</script>

注意：

DOM0级和DOM2级都可以在同一个元素上，绑定多个事件处理程序，但是DOM0级的新绑定的会覆盖前一个绑定的事件

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    function showInfo(){
        alert('这是DOM2级事件处理程序')
    }
    var btn = document.getElementById('btn');
    btn.addEventListener("click",showInfo,false)
    btn.addEventListener("click",function(){
        alert('hello')
    },false)
</script>

1、IE9+的浏览器已经支持DOM2级事件，也就是说支持addEventListener()方法和removeEventListener()方法
2、但是IE8之前的浏览器并不支持DOM2级事件，他们有自己的事件处理程序，即IE事件处理程序

4、IE事件处理程序

两个方法：

1、attachEvent(type，fn) 添加事件
2、detachEvent(type，fn) 删除事件
3、这里并没有第三个参数，是因为IE8之前的浏览器只支持事件冒泡

思路：

给btn绑定attachEvent()方法

例子：
绑定事件：第一个参数要加"on"

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    function showInfo(){
        alert('这是IE事件处理程序')
    }
    var btn = document.getElementById('btn');
    btn.attachEvent("onclick",showInfo)
</script>

删除事件

btn.detachEvent("onclick",showInfo)

注意：

1、第一个参数要加on，即不是click，而是onclick
2、addEventListener。IE9+支持，IE8之前不支持。
3、attachEvent。只有IE和Opera支持，现在IE11也不支持了

5、跨浏览器的事件处理程序

什么是跨浏览器事件处理程序：

因为IE浏览器和其他浏览器的不同，我们需要兼容浏览器

思路：

1、封装一个对象EventUtil
2、创建两个方法，一个添加，一个删除
3、在这个方法里判断，各浏览器支持什么方法就用什么方法

例子：

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    function showName(){
        alert('bree')
    }
    var EventUtil = {
        //添加事件
        addHandler:function(ele,type,fn){
                //DOM2级事件
            if(ele.addEventListener){
                ele.addEventListener(type,fn,false);
                //IE事件
            }else if(ele.attachEvent){
                ele.attachEvent("on"+type,fn)
                //DOM0级事件
            }else{
                ele["on"+type] = fn
            }
        },
        //删除事件
        removeHandler:function(ele,type,fn){
                //DOM2级事件
            if(ele.removeEventListener){
                ele.removeEventListener(type,fn,false);
                //IE事件
            }else if(ele.detachEvent){
                ele.detachEvent("on"+type,fn)
                //DOM0级事件
            }else{
                ele["on"+type] = null
            }
        }
    }
    var btn = document.getElementById('btn');
    EventUtil.addHandler(btn,"click",showName);
    EventUtil.removeHandler(btn,"click",showName)
</script>