ExtJs之DHTML,DOM,EXTJS的事件綁定差別

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<code>&lt;!</code><code>doctype</code> <code>html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;extjs&lt;/</code><code>title</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>meta</code> <code>http-equiv="content-type" content="text/html; charset=utf-8"/&gt;</code>

<code>        </code><code>&lt;</code><code>link</code> <code>rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"&gt;</code>

<code>      </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/ext-all.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>      </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/bootstrap.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>      </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/packages/ext-theme-crisp/build/ext-theme-crisp.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type="text/javascript"&gt;</code>

<code>function hello() {</code>

<code>  </code><code>alert('hello');</code>

<code>}</code>

<code>ext.onready(function(){</code>

<code>  </code><code>function hello3(){</code>

<code>    </code><code>alert('hello3');</code>

<code>    </code><code>return true;</code>

<code>  </code><code>}</code>

<code>  </code><code>function hello4(){</code>

<code>    </code><code>alert('hello4');</code>

<code>    </code><code>return false;</code>

<code>  </code><code>var button = ext.get('btn3');</code>

<code>  </code><code>button.addlistener('click', hello3);</code>

<code>  </code><code>button.addlistener('click', hello4);</code>

<code>})</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id='id01' &gt;hello, this word.&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type="button" id="btn" value="dhtml click" onclick="hello()"&gt;</code>

<code>&lt;</code><code>input</code> <code>type="button" id="btn12" value="dom click"&gt;</code>

<code>&lt;</code><code>input</code> <code>type="button" id="btn3" value="extjs click"&gt;</code>

<code>&lt;</code><code>script</code> <code>language="javascript"&gt;</code>

<code>function hello1(){</code>

<code>  </code><code>alert('hello1');</code>

<code>function hello2(){</code>

<code>  </code><code>alert('hello2');</code>

<code>var button = document.getelementbyid('btn12');</code>

<code>console.log(button);</code>

<code>button.addeventlistener('click', hello1, false);</code>

<code>button.addeventlistener('click', hello2, false);</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>