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;
    }