#navi(../)
# DOMへのイベント割り当て（イベントリスナ）
これまでは、ボタンがクリックされたときにclick_func()という関数を実行する場合、onclick要素を使ってきた。
```
<button onclick="click_func();">ボタン</button>
```
これをイベントハンドラ式と呼ぶ。しかし、最近ではajax化が進みこの方法だと、関数の競合が起こりやすくなってきた。また、HTMLソースの見た目も悪くなる上、外部スクリプト化したときに正常に作動しないケースが多くなる。

そこで、onload時に命令を割り当ててしまおうという方法が最近のJavaScriptのプログラミングにおいて一般的となっている。onloadに関する情報は、[../onloadイベント](../onloadイベント)を参照。これをイベントリスナ式と呼ぶ。

## 通常
これは、フレームワークを用いない通常の方法

形式は、 addListener(要素のIDなど,イベントのタイプ（click,mouseoverなど）,実行したい関数)となる。
```
var addListener = function(elm, type, func) {
	if(! elm) { return false; }
	if(elm.addEventListener) { /* W3C準拠ブラウザ用 */
		elm.addEventListener(type, func, false);
	} else if(elm.attachEvent) { /* Internet Explorer用 */
		elm.attachEvent('on'+type, func);
	} else {
 		return false;
	}
	return true;
};
```


これを用いることによって、HTML部は
```
<button id="btn">ボタン</button>
```
となり、実際スクリプトを記述する部分は、後述する通常の方法では、さきほどのスクリプトの直下に
```
addListener(document.getElementById('btn'), "click", click_func);
```
のように記述し、分離することが可能になる。

## prototype.jsの場合
prototype.jsの場合は、Event.observeで割り当て。$('...')は、document.getElementById('...')のショートカット。
```
Event.observe($('btn'), 'click', click_func);
```

## [dojo](/dojo)の場合
基本的に以下のようになる。
```
dojo.byId('btn')connect('onclick',click_func);
```
ただし、dijitなどで装飾しているフォームなどの場合は、
```
dijit.byId('btn').connect('onclick',click_func);
```
のように、dojo.byIdが使えない場合があるので注意。

または、CSSセレクタを用いて、
```
dojo.query('#btn').connect('onclick',click_func);
```
という指定方法も可能である。

## jQueryの場合
jQueryの場合はもっと簡単。基本的にid属性でアクセスという概念が無く、すべてCSSセレクタで指定する。

つまり、$()に入る要素の指定方法は、CSSで言うIDの指定方法と同じだ。dojoで言うところのすべてがdojo.query()とみなしてよい。
```
$("#btn").click(click_func);
```

## uupaa-jsの場合
```
uu.event.set(null,uu.id('btn'),'click',false)
```


---

## Page Navigation

- Canonical URL: https://logue.be/JavaScript/イベントリスナ
- Permalink: https://logue.be/66d5d5054b8138004c26fbc7
- Parent: [JavaScript](/66d5d4f34b8138004c26fbb5.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 11 total
  - [CSSセレクタ比較](/66d5d4f54b8138004c26fbb7.md)
  - [JSとCSSの非同期読み込み](/66d5d4f74b8138004c26fbb9.md)
  - [ajax](/66d5d4f94b8138004c26fbbb.md)
  - [ini.js](/66d5d4fb4b8138004c26fbbd.md)
  - [io.js](/66d5d4fd4b8138004c26fbbf.md)
  - [jQuery](/66d977b60e64af17b0d350a6.md)
  - [jQueryでrequire](/66d5d5014b8138004c26fbc3.md)
  - [onloadイベント](/66d5d5034b8138004c26fbc5.md)
  - [ビックスコープ](/66d5d5074b8138004c26fbc9.md)
  - [フレームワーク](/66d5d5094b8138004c26fbcb.md)
  - [ブラウザの「戻る」ボタンのハッキング](/66d5d50b4b8138004c26fbcd.md)
- Last updated: 2024-09-02T16:47:16.624Z by 
- Full page listing (all children regardless of count): https://logue.be/_api/v3/page-listing/children?id=66d5d5054b8138004c26fbc7