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

      

  • 相关阅读:
    Linux与Windows共享文件夹之samba的安装与使用(Ubuntu为例)
    linux下导入、导出mysql数据库命令
    navicat for mysql (10038)如何解决,远程无法连接问题
    js过滤前后空格
    js大小写转换
    Sublime Text 超好用的侧栏插件SideBarEnhancements
    nginx,FastCGI启动语句
    Samba Linux和Windows互访
    JS 添加千分位,测试可以使用
    Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化
  • 原文地址:https://www.cnblogs.com/oxspirt/p/9266744.html
Copyright © 2020-2023  润新知