对象方法Javascript HTML DOM中的多个事件监听器

Multiple Event Listeners inside of Object Method Javascript HTML DOM

本文关键字：事件 监听器 方法 Javascript HTML DOM 对象      更新时间：2023-09-26

这里有一些答案和一些我通过谷歌发现的东西，几乎让我到达我想要的地方，但有些东西告诉我，我在这个问题上走错了，希望得到一些帮助。

我试图简化向同一元素添加多个事件侦听器。我认为我的问题只是在调用controller.listenz()函数时没有使用正确的作用域。如有任何帮助，我将不胜感激。

我目前得到的错误是在listenz()方法中抛出，并告诉我"fn不是一个函数"。我想这是有道理的，它是一个对象，但我如何修复它?

JSFIDDLE

Javascript 

 var controller = {
     realtime: true,
     listenz: function(ele, e, fn, c, o) {
         //validate
         if (!(e instanceof Array)) {
             throw 'Javascript Listener:  Error 642';
         }

         var h = function() {
            fn.apply(this, o && o instanceof Array ? o : []);
         };

         //bind events
         for (var i = 0; i < e.length; i += 1) {
             ele.addEventListener(e[i], h, c);
         }
     },
     initz: function() {
         this.listenz(document.getElementById("real"), ["change"], this, false);
         this.listenz(document.getElementById("foi"), ["change"], this, false);
         this.listenz(document.getElementById("sim"), ["change"], this, false);
         this.listenz(document.getElementById("rev"), ["change"], this, false);
     },
     handleEvent: function(e) {
         switch (e.target.id) {
             case 'real':
                 console.log('real');
                 //this.realtime = e.target.checked ? true : false;
                 //this.realz();
                 //if (this.realtime) this.submitz();
                 break;
             default:
                 console.log('default');
                 //if (this.realtime) this.submitz();
                 break;
         }
     }
 };
HTML 

<body>
    <div class="wrapper">
        <ul>
            <li>
                Real
                <input type="checkbox" name="real" id="real">
            </li>
            <li>
                Strip
                <input type="checkbox" name="sim" id="sim">
            </li>
            <li>
                Reverse
                <input type="checkbox" name="rev" id="rev">
            </li>
            <li>
                Foil
                <input type="checkbox" name="foi" id="foi">
            </li>
        </ul>
    </div>
    <script>
        controller.initz();
    </script>
</body>

几个问题:

  • 您的listenz函数的fn参数实际上代表function，等待回调。这里，在listenz函数中，您传递的是this，它是controller对象。修改为this.handleEvent

  • h变量将把默认事件参数覆盖为listenz函数中o参数中指定的参数(如果有的话)。正如现在所写的，如果没有指定o参数，它将对回调函数应用一个空数组。你想要的是应用默认参数所以你应该把它改成

     var h = function() {
    fn.apply(this, o && o instanceof Array ? o : arguments);
 }

最后，您永远不会初始化控制器对象。

下面是一个工作片段:

     var controller = {
         realtime: true,
         listenz: function(ele, e, fn, c, o) {
             //validate
             if (!(e instanceof Array)) {
                 throw 'Javascript Listener:  Error 642';
             }
             var h = function() {
             	fn.apply(this, o && o instanceof Array ? o : arguments);
             };
             //bind events
             for (var i = 0; i < e.length; i ++) {
                 ele.addEventListener(e[i], h, c);
             }
         },
         initz: function() {
             this.listenz(document.getElementById("real"), ["change"], this.handleEvent, false);
             this.listenz(document.getElementById("foi"), ["change"], this.handleEvent, false);
             this.listenz(document.getElementById("sim"), ["change"], this.handleEvent, false);
             this.listenz(document.getElementById("rev"), ["change"], this.handleEvent, false);
         },
         handleEvent: function(e) {
             switch (e.target.id) {
                 case 'real':
                     alert('real');
                 	 
                     //this.realtime = e.target.checked ? true : false;
                     //this.realz();
                     if (this.realtime) this.submitz();
                     break;
                 default:
                     console.log('default');
                     if (this.realtime) this.submitz();
                     break;
             }
         }
     };
controller.initz()
	<body>
	    <div class="wrapper">
	        <ul>
	            <li>
	                Real
	                <input type="checkbox" name="real" id="real">
	            </li>
	            <li>
	                Strip
	                <input type="checkbox" name="sim" id="sim">
	            </li>
	            <li>
	                Reverse
	                <input type="checkbox" name="rev" id="rev">
	            </li>
	            <li>
	                Foil
	                <input type="checkbox" name="foi" id="foi">
	            </li>
	        </ul>
	    </div>
	   
	</body>

相关文章：