随笔- 1793 文章- 1 评论- 61 阅读- 298万

javascript 的事件绑定和取消事件

研究fabricjs中发现，它提供canvas.on('mousemove', hh) 来绑定事件，提供 canvas.off()来取消绑定事件这样的接口，很是方便，

那我们就不妨探究一下内在的实现原理：

<h1>
    The "Post-Link" Function Is The "Link" Function In AngularJS Directives
</h1>
 
<p
        bn-using-post-link
        bn-using-link
        bn-using-fn-only>
 
    Look at the console-output; I am logging the link-functions from within the
    AngularJS source-code.
    <button onclick="cancelEve();">取消事件</button>
</p>
 
<script> 
function say(){
        console.log('say arguments: ', arguments);
        console.log(arguments.length);
        for(var i in arguments){
            console.log(arguments[i]);
        }
    }
    say(1, 2, 3);
    // document.onmousemove = function (ev) {
    //  console.log('moving', ev);
    //  for(var i in ev){
    //      console.log("i: ", i, '-------------:',ev[i]);
    //     }
    // };
    function mousemoveHandler() {
        console.log('mousemove');
    }
    function mousemoveHandler2() {
        console.log('mousemove 2');
    }
    document.addEventListener('mousemove', mousemoveHandler);
    document.addEventListener('mousemove', mousemoveHandler2);
 
    var cancelEve = (function (){
        // document.onmousemove = null;
        var i = 0;
        return function(){
            i++;
            document.removeEventListener('mousemove', mousemoveHandler);
            if(i == 2){
                document.removeEventListener('mousemove', mousemoveHandler2);
            }
        };
 
    })();
<script>

--------------------------------------------------------------------

通过 addEventListener() 可以对同一个事件绑定多个处理处理函数，而通过 document.onmousemove = function(){//....}这样好像只能绑定一个处理函数。

取消事件绑定的话，后者只需要 document.onmousemove = null 就可以了。

而前者，则需要通过 removeEventListener() 这个函数来取消绑定的事件，需要一个一个取消绑定。

-----------------------------------------------------------

直接通过document.onmousemove = hh 绑定的事件，后面绑定的事件会覆盖掉前面绑定的事件。

function mousemoveHandler() {
    console.log('mousemove');
}
function mousemoveHandler2() {
    console.log('mousemove 2');
}
document.onmousemove = mousemoveHandler;
document.onmousemove = mousemoveHandler2;
var cancelEve = function (ev) {
    document.onmousemove = null;
}