ExtJs之DHTML,DOM,EXTJS的事件绑定区别

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30564785

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aguncn/p/5314760.html

本文通过一个简单的HTML页面展示了如何使用ExtJS框架来处理按钮点击事件。页面中包含了多个按钮，分别演示了直接使用HTML onclick属性、JavaScript addEventListener方法及ExtJS的addListener方法来绑定点击事件处理器。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  		<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
      <script type="text/javascript" src="ExtJs/ext-all.js"></script>
      <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
      <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
</head>
<body>
<script type="text/javascript">
function hello() {
  alert('hello');
}
Ext.onReady(function(){
  function hello3(){
    alert('hello3');
    return true;
  }
  function hello4(){
    alert('hello4');
    return false;
  }

  var button = Ext.get('btn3');
  button.addListener('click', hello3);
  button.addListener('click', hello4);
})
</script>
<body>
<div id='id01' >hello, this word.</div>
<input type="button" id="btn" value="DHTML CLICK" onclick="hello()">
<input type="button" id="btn12" value="DOM CLICK">
<input type="button" id="btn3" value="ExtJs CLICK">

<script language="JavaScript">
function hello1(){
  alert('hello1');
}
function hello2(){
  alert('hello2');
}
var button = document.getElementById('btn12');
console.log(button);
button.addEventListener('click', hello1, false);
button.addEventListener('click', hello2, false);
</script>
</body>
</html>