javascriptカスタムイベント解説

4642 ワード

JavaScript

イベントをカスタマイズ
カスタムイベントとは?
カスタムイベント:これが関数と関係があると、関数にイベントのいくつかの特性を持たせます.
なぜカスタムイベントを使うのですか?
多くの人が協力してコードを開発することに有利で、一緒に開発して衝突しません.
カスタムイベントとイベント関数をマウントするにはどうすればいいですか?
1.イベントバインディングのメリットは何ですか?
まず、カスタムイベントは関数で構成されています.すなわち、関数で呼び出されます.まずイベントバインディングを簡単に理解します.htmlコード

<div id="div1">
    div
</div>
<span id="span1">span</span>

簡単なイベントバインディング関数

 function bind(obj,events,fn){
 //    obj.addEventListener（       ）  ，       obj.attachEvent（IE   ）
   if(obj.addEventListener){
                        obj.addEventListener(events,fn,false);
            }else{
                  obj.attachEvent('on'+events,function(){
                  // IE           window,   call     
                    fn.call(obj);
            })
   }
}

 window.onload=function(){
            var oDiv=document.getElementById('div1');
            bind(oDiv,'click',function(){
                alert('1');
            });//1
            bind(oDiv,'click',function(){
                alert('2');
            });//2

        };

結果としては、1/2は同時に発生します.これはイベントのトリガが必要です.しかし、イベントを使わずにイベントバインディングの効果を達成できると考えています.パッケージ関数のfn方法を実行しているだけです.ここを思い付きました.各fnはeventsに対応しています.objをビルの階に見立てて、eventsを本棚にたとえます.fnは対応する本です.指定階の指定棚に本を置くといいと思います.これにより方法の集合を得るためには、ビッドパッケージ方法を書き換える必要がある.

function bind(obj,events,fn){
            //obj；  
            //events:  
            //fn:   
            //           ，        
            obj.listeners = obj.listeners || {};
            //                  
            obj.listeners[events]=obj.listeners[events] || [];
            //   
            obj.listeners[events].push(fn);
            if(obj.addEventListener){
                obj.addEventListener(events,fn,false);
            }else{
                obj.attachEvent('on'+events,function(){
                    fn.call(obj);
                })
            }
        }

今私たちはfnの方法の集合をobj.listeners[events]に記憶しています.次のステップはどのように実行中の各関数を呼び出しますか?

var oSpan=document.getElementById('span1');
bind(oSpan,'show',function(){
                alert('3');
            });
bind(oSpan,'show',function(){
                alert('4');
            });
//    
fireEvent(oSpan,'show');
//         
       function fireEvent(obj, events) {
            //    obj.listeners  obj.listeners[events]  
            if(obj.listeners && obj.listeners[events]){
                for (var i = 0; i < obj.listeners[events].length; i++) {
                    //    
                    obj.listeners[events][i]();
                }
            }
            

        }

本人のレベルが限られていますので、この程度までしか理解できません.

<!doctype html>
<html lang="zh_EN">
<head>
    <meta charset="UTF-8">
    <title>     </title>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oSpan = document.getElementById('span1');
            bind(oDiv, 'click', function () {
                alert('1');
            });
            bind(oDiv, 'click', function () {
                alert('2');
            });


            bind(oSpan, 'show', function () {
                alert('3');
            });
            bind(oSpan, 'show', function () {
                alert('4');
            });
            fireEvent(oSpan, 'show');

        };


        //    
        function bind(obj, events, fn) {
            //obj；  
            //events:  
            //fn:   
            //    
            obj.listeners = obj.listeners || {};
            //    
            obj.listeners[events] = obj.listeners[events] || [];
            //   
            obj.listeners[events].push(fn);
            if (obj.addEventListener) {
                obj.addEventListener(events, fn, false);
            } else {
                obj.attachEvent('on' + events, function () {
                    fn.call(obj);
                })
            }
        }
        //         
        function fireEvent(obj, events) {
            for (var i = 0; i < obj.listeners[events].length; i++) {
                //    
                obj.listeners[events][i]();
            }

        }
    </script>
</head>
<body>
<div id="div1">
    div
</div>
<span id="span1">span</span>
</body>
</html>

JavaScript setTimeoutの原理