は、私はHTMLページを作成して、理論的には、我々が持っているだろうので、プロトタイプオブジェクトを経由して処理するいくつかのJavaScriptのイベントを追加しようとしている

を試作JavaScriptを使用して宣言しましたプロトタイプのオブジェクトを作成し、ボディーの "onLoad"イベント中にプロトタイプ関数を呼び出す標準のHTMLページです。は、私はHTMLページを作成して、理論的には、我々が持っているだろうので、プロトタイプオブジェクトを経由して処理するいくつかのJavaScriptのイベントを追加しようとしている

この関数は、controlsイベントをクラス内の2番目のプロトタイプ関数に関連付けます。

この例では、テキストボックスの変更イベントをキャプチャしたいと思いますが、実際のページにはかなりの数のコントロールがあります。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="jquery-1.10.2.js"></script> 
    <script src="jquery.blockUI.js"></script> 
    <script src="jquery.mobile-1.3.2.js"></script> 
    <script src="searchAddress.js"></script> 
    <script> 
     function loadIt() { 
      SearchAddressController = new SearchAddressControllerBase; 
      SearchAddressController.BindTheCotrols(); 
     } 
    </script> 
</head> 
<body onload="loadIt()"> 

    <input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" /> 
    <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" /> 
    <button></button> 
</body> 
</html>

searchAddress.jsにあるコードは、私は最終的に手回しではなく生成されるようにHTMLとJSの間のこの分離を作成する必要が

var SearchAddressControllerBase = function() { 
    this.houseNumber = null; 
    this.postCode = null; 
}; 

SearchAddressControllerBase.prototype.GeneralEventHandler = function (c, e) { 
    // would like the text boxes change event to land here... 

} 

SearchAddressControllerBase.prototype.BindTheCotrols = function() { 

    // bind the controls here 
    $("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change')); 
};

あります。

BindTheControls関数を使用して、GeneralEventHandlerへのtextHouseNoルートの変更イベントを作成する方法について説明しています。私が見てきた

夫婦のリンクは以下のとおりです。 Advantages of using prototype, vs defining methods straight in the constructor? と https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

出典

2016-09-23 Matt

問題は何ですか？私はあなたが尋ねようとしているものが混乱しています... –

BindTheCotrols関数が呼び出されますが、私はそれを取得する方法を知っていませんGeneralEventHandlerは、HTMLコントロールからのイベントを処理する。私の質問をうまくいけばそれを少しはっきりと更新しました。 – Matt

あなたは本当に近いです。あなたがこれを行うとき：

$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));

あなたが実際に変更イベントにそれを割り当てるのではなく、ただちにGeneralEventHandlerを呼び出しています。そして、ハンドラメソッドでは、あなたがこのようなイベントについての情報を取得することができます

$("#textHouseNo").change(this.GeneralEventHandler);

：あなたはそれを変更する必要が

function (evt) { var el = evt.currentTarget var type = evt.type; var id = el.id var val = el.value console.log(id, type, val) }

チェックアウト作業のデモ

var SearchAddressControllerBase = function() { this.houseNumber = null; this.postCode = null; }; SearchAddressControllerBase.prototype.GeneralEventHandler = function (evt) { // would like the text boxes change event to land here... var el = evt.currentTarget var type = evt.type; var id = el.id var val = el.value console.log(id, type, val) } SearchAddressControllerBase.prototype.BindTheCotrols = function() { // bind the controls here $("#textHouseNo").change(this.GeneralEventHandler); }; function loadIt() { SearchAddressController = new SearchAddressControllerBase; SearchAddressController.BindTheCotrols(); } // would be called from "onload" loadIt()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" /> <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" /> <button></button>

出典

2016-09-23 17:52:21

ありがとう、あなたの変更はそれが完全に動作するように – Matt

は、私はHTMLページを作成して、理論的には、我々が持っているだろうので、プロトタイプオブジェクトを経由して処理するいくつかのJavaScriptのイベントを追加しようとしている

答えて

チェックアウト作業のデモ

関連する問題