js事件绑定细节说明

javascript绑定事件：

经常用jQuery去写，时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了，必须翻出来再次总结，今天再次把js原生态事件的处理做个总结。

从最初开始，谁刚接触javascript的时候，老师都会这样教导我们怎么触发事件，在页面某个DOM节点上面添加所要触发的事件，比如：onclick,onmousedown,onmouseup，onfocus,onchange等等...看代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
         function init(val){
             alert(val + '事件触发');
         }
    </script>
</head>
<body>
 <h1 id="klm" onmousedown="init('onmousedown')">事件</h1>
</body>
</html>

直接在DOM节点内添加事件，这种方式初学者适用，对于我们企业前端开发最好不要用这样的方式，虽然这样看上去很直观，但把函数暴露在页面是很危险的事情。

那我们接下来将这个方式移到js中去操作，拿onclick来说，用纯js方式首先要获取DOM对象，然后去触发onclick事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            _this.onclick = function(){
                alert( '点击事件绑定');
            }
        };
    </script>
</head>
<body>
 <h1 id="klm">事件</h1>
</body>
</html>

这样的方式也很简单，我们也可以用这种方式绑定多种事件处理

 _this.onmouseup = function(){
        alert( '鼠标事件绑定');
}
 _this.onclick = function(){
        alert( '点击事件绑定');
}

如果用alert()方式的话，在任何浏览器只能触发第一个函数提示，其后面的则不执行，如果用 console.log()控制台打印则在浏览器（除IE浏览器）下都会执行出结果。

attachEvent函数：

为此，我再做其他方式为了兼容浏览器，在js中提供了绑定方式，针对IE这样的浏览器提供的代码是这样写的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            _this.attachEvent('onmousedown',function(){
                console.log('鼠标按下事件')
            });
            _this.attachEvent('onmouseup',function(){
                console.log('鼠标抬起事件')
            });
        };
    </script>
</head>
<body>
 <h1 id="klm">事件</h1>
</body>
</html>

注:(在IE浏览器所写的事件名称要用"on"打头的，如onclick,onmouseup,等)

运行结果：

addEventListener函数：

W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。

注：这个函数也是被黑客利用的工具，利用它来实现内联xss拦截

这个函数除了IE内核系列浏览器之外，基本都执行，而且传入的事件名称不是以“on”开头，先直观的看下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            _this.addEventListener('mousedown',function(){
                console.log('鼠标按下事件')
            });
            _this.addEventListener('mouseup',function(){
                console.log('鼠标抬起事件')
            });
        };
    </script>
</head>
<body>
 <h1 id="klm">事件</h1>
</body>
</html>

火狐，搜狗，谷歌执行结果：

但是光这样写没法满足兼容性，需要将2个函数整合起来，这里就需要做一个判断，然后判断结果成立，则执行逻辑里面的方法，在写这个逻辑有很多种，我列举2个思路:1,可以通过判断浏览器方式进入对应的函数方式。2，通过直接判断浏览器是否含有attachEvent或addEventListener函数方式。我就用第2个思路进行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            if(_this.addEventListener){
                _this.addEventListener('mousedown',function(){
                    console.log('鼠标按下事件')
                });
                _this.addEventListener('mouseup',function(){
                    console.log('鼠标抬起事件')
                });
            }else{
                _this.attachEvent('onmousedown',function(){
                    console.log('鼠标按下事件')
                });
                _this.attachEvent('onmouseup',function(){
                    console.log('鼠标抬起事件')
                });
            }
        };
    </script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

火狐和IE浏览器运行结果：

都能顺利的执行代码了。。。（上面的代码还可以精简，在这里我只是样例）

在这里提一个概念：事件捕获和事件冒泡

事件捕获：

事件从最上一级HTML标签开始，一级一级向下查找，直到捕获到事件目标为止。

事件冒泡：

事件从事件目标开始，往上冒泡直到页面的最上一级标签。

在IE浏览器中只支持事件冒泡，不支持事件捕获。而addEventListener函数是第三个参数的设置是判断你在浏览器(去除IE浏览器)下是用事件捕获或者事件冒泡方式执行,"true"是捕获，false是冒泡。

阻止冒泡：

IE方式是： window.event.cancelBubble = true;

火狐浏览器方式：e.stopPropagation()

上面说了绑定事件，js还提供了其他方式,接下来说下删除事件绑定

detachEvent:

IE浏览器提供了这个函数去删除已绑定事件的操作。

detachEvent(funType,funname):2个参数值funType指的触发的事件类型，如onclick,onmouseup... funname则是所要去掉的函数，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            //添加一个onmouseup事件
            _this.attachEvent('onmouseup',init);
            function init(){
                console.log('鼠标抬起事件')
                //删除onmouseup事件
                _this.detachEvent('onmouseup',init);
            }
        };
    </script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

注：我先用attachEvent绑定onmouseup事件，当触发完这个事件的时候并将onmouseup事件删除。这样<h1>对象就不会再触发事件效果了。

attachEvent非W3C标准，而是IE自己的，那些遵循W3C标准的浏览器该用什么呢？

removeEventListener:

拿火狐为例，使用此函数才能删除已绑定的事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var _this = document.getElementById('klm');
            //添加一个onmouseup事件
            _this.addEventListener('mouseup',init,false);
            function init(){
                console.log('鼠标抬起事件');
                //删除onmouseup事件
                _this.removeEventListener('mouseup',init,false);
            }
        };
    </script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

如果 _this.removeEventListener('mouseup',init,true);这里最后一个参数和添加事件设置的不一致，则删除事件无效。

通过js原生态的语法的了解，对以后底层封装会有很大的帮助。