回答編集履歴

3 Dragpos.prototype.handleEvent のコード修正

think49

think49 score 14193

2017/09/06 11:13  投稿
下記スレッドを参考にしてみて下さい。
- [JavaScript - javascriptのプログラム構造について(24798)｜teratail](https://teratail.com/questions/24798)
**(2017/09/06 11:05追記)**
サンプルコードを追記しました。
### addEventListener + handleEvent
`addEventListener` は第二引数に `handleEvent` プロパティを持つオブジェクトを指定した場合、`this` 値を指定したオブジェクトに束縛することが出来ます。
- [EventTarget.addEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
```JavaScript
function Dragpos (element) {
 // 中略
 document.addEventListener('mousedown', this, false);
 document.addEventListener('mouseup', this, false);
 document.addEventListener('mousemove', this, false);
}
Dragpos.prototype.handleEvent = function handleEvent (event) {
 switch (event.type) {
   case 'mousedown':
     return this.mouseDown(event);
     return this.mouseDown.call(this, event);
   case 'mouseup':
     return this.mouseUp(event);
     return this.mouseUp.call(this, event);
   case 'mousemove':
     return this.mouseMove(event);
     return this.mouseMove.call(this, event);
 }
 throw new Error('unknown event type');
};
```
### Function.prototype.bind
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
`event.currentTarget` に束縛された `this` 値を `Function.prototype.bind` で `new Dragpos` に束縛し直します。
```JavaScript
document.addEventListener('mousedown', this.mouseDown.bind(this), false);
document.addEventListener('mouseup', this.mouseUp.bind(this), false);
document.addEventListener('mousemove', this.mouseMove.bind(this), false);
```
### jQuery.proxy
- [jQuery.proxy() | jQuery API Documentation](https://api.jquery.com/jQuery.proxy/)
`Function .prototype.bind` と同様。
```JavaScript
document.addEventListener('mousedown', jQuery.proxy(this.mouseDown, this), false);
document.addEventListener('mouseup', jQuery.proxy(this.mouseUp, this), false);
document.addEventListener('mousemove', jQuery.proxy(this.mouseMove, this), false);
```
### jQuery.prototype.on + event.data
- [.on() | jQuery API Documentation](https://api.jquery.com/on/)
- [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)
`this` から取り出すのを諦めて、`jQuery.prototype.on` の `event.data` 経由で `this` 値を参照します。
```JavaScript
function Dragpos (element) {
 // 中略
 jQuery(document).on('mousemove', {thisArg: this}, this.mouseMove);
}
Dragpos.prototype.mouseMove = function mouseMove (event) {
 var thisArg = event.data.thisArg;
 if (thisArg.drag) {
   console.log(thisArg.panel);
 }
};
```
Re: nnahito さん
2 typo修正

think49

think49 score 14193

2017/09/06 11:06  投稿
下記スレッドを参考にしてみて下さい。
- [JavaScript - javascriptのプログラム構造について(24798)｜teratail](https://teratail.com/questions/24798)
**(2017/09/06 11:05追記)**
サンプルコードを追記しました。
### addEventListener + handleEvent
`addEventListener` は第二引数に `handleEvent` プロパティを持つオブジェクトを指定した場合、`this` 値を指定したオブジェクトに束縛することが出来ます。
- [EventTarget.addEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
```JavaScript
function Dragpos (element) {
 // 中略
 document.addEventListener('mousedown', this, false);
 document.addEventListener('mouseup', this, false);
 document.addEventListener('mousemove', this, false);
}
Dragpos.prototype.handleEvent = function handleEvent (event) {
 switch (event.type) {
   case 'mousedown':
     return this.mouseDown(event);
   case 'mouseup':
     return this.mouseUp(event);
   case 'mousemove':
     return this.mouseMove(event);
 }
 throw new Error('unknown event type');
};
```
### Function .prototype.bind
### Function.prototype.bind
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
`event.currentTarget` に束縛された `this` 値を `Function .prototype.bind` で `new Dragpos` に束縛し直します。
`event.currentTarget` に束縛された `this` 値を `Function.prototype.bind` で `new Dragpos` に束縛し直します。
```JavaScript
document.addEventListener('mousedown', this.mouseDown.bind(this), false);
document.addEventListener('mouseup', this.mouseUp.bind(this), false);
document.addEventListener('mousemove', this.mouseMove.bind(this), false);
```
### jQuery.proxy
- [jQuery.proxy() | jQuery API Documentation](https://api.jquery.com/jQuery.proxy/)
`Function .prototype.bind` と同様。
```JavaScript
document.addEventListener('mousedown', jQuery.proxy(this.mouseDown, this), false);
document.addEventListener('mouseup', jQuery.proxy(this.mouseUp, this), false);
document.addEventListener('mousemove', jQuery.proxy(this.mouseMove, this), false);
```
### jQuery.prototype.on + event.data
- [.on() | jQuery API Documentation](https://api.jquery.com/on/)
- [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)
`this` から取り出すのを諦めて、`jQuery.prototype.on` の `event.data` 経由で `this` 値を参照します。
```JavaScript
function Dragpos (element) {
 // 中略
 jQuery(document).on('mousemove', {thisArg: this}, this.mouseMove);
}
Dragpos.prototype.mouseMove = function mouseMove (event) {
 var thisArg = event.data.thisArg;
 if (thisArg.drag) {
   console.log(thisArg.panel);
 }
};
```
Re: nnahito さん
1 サンプルコードを追記

think49

think49 score 14193

2017/09/06 11:05  投稿
下記スレッドを参考にしてみて下さい。
- [JavaScript - javascriptのプログラム構造について(24798)｜teratail](https://teratail.com/questions/24798)
**(2017/09/06 11:05追記)**  
サンプルコードを追記しました。  
 
### addEventListener + handleEvent  
 
`addEventListener` は第二引数に `handleEvent` プロパティを持つオブジェクトを指定した場合、`this` 値を指定したオブジェクトに束縛することが出来ます。  
 
- [EventTarget.addEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)  
 
```JavaScript  
function Dragpos (element) {  
 // 中略  
 
 document.addEventListener('mousedown', this, false);  
 document.addEventListener('mouseup', this, false);  
 document.addEventListener('mousemove', this, false);  
}  
 
Dragpos.prototype.handleEvent = function handleEvent (event) {  
 switch (event.type) {  
   case 'mousedown':  
     return this.mouseDown(event);  
   case 'mouseup':  
     return this.mouseUp(event);  
   case 'mousemove':  
     return this.mouseMove(event);  
 }  
 
 throw new Error('unknown event type');  
};  
```  
 
### Function .prototype.bind  
 
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)  
 
`event.currentTarget` に束縛された `this` 値を `Function .prototype.bind` で `new Dragpos` に束縛し直します。  
 
```JavaScript  
document.addEventListener('mousedown', this.mouseDown.bind(this), false);  
document.addEventListener('mouseup', this.mouseUp.bind(this), false);  
document.addEventListener('mousemove', this.mouseMove.bind(this), false);  
```  
 
### jQuery.proxy  
 
- [jQuery.proxy() | jQuery API Documentation](https://api.jquery.com/jQuery.proxy/)  
 
`Function .prototype.bind` と同様。  
 
```JavaScript  
document.addEventListener('mousedown', jQuery.proxy(this.mouseDown, this), false);  
document.addEventListener('mouseup', jQuery.proxy(this.mouseUp, this), false);  
document.addEventListener('mousemove', jQuery.proxy(this.mouseMove, this), false);  
```  
 
### jQuery.prototype.on + event.data  
 
- [.on() | jQuery API Documentation](https://api.jquery.com/on/)  
- [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)  
 
`this` から取り出すのを諦めて、`jQuery.prototype.on` の `event.data` 経由で `this` 値を参照します。  
 
```JavaScript  
function Dragpos (element) {  
 // 中略  
 
 jQuery(document).on('mousemove', {thisArg: this}, this.mouseMove);  
}  
 
Dragpos.prototype.mouseMove = function mouseMove (event) {  
 var thisArg = event.data.thisArg;  
 
 if (thisArg.drag) {  
   console.log(thisArg.panel);  
 }  
};  
```  
 
Re: nnahito さん

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る