EXT JS点滴（3）EXT JS 事件机制

在这一节中，我将通过一些实例来跟大家讨论一下，EXT JS中事件的处理方式

第一个事件例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS点滴（3）事件处理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件处理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件处理例子1</p>" }); win.show(); } Ext.onReady( function(){ Ext.select("div:odd").addClass("red"); Ext.select("div:odd").on("click",openWin);//监听奇数行Div的click事件 } ); </script> <body> <div >第1个DIV</div> <div >第2个DIV</div> <div >第3个DIV</div> <div >第4个DIV</div> </body> </html>

运行结果如下：

第二个事件处理例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS点滴（3）事件处理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件处理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件处理例子2</p>" }); win.show(); } Ext.onReady( function(){ Ext.get("evtBtn").on("click",openWin);//监听按钮的click事件 } ); </script> <body> <input type="button" id="evtBtn" value="点我，吓死你"/> </body> </html>

运行效果如下：

第三个事件处理例子（延时执行事件）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS点滴（3）事件处理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件处理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件处理例子3</p>" }); win.show(); } Ext.onReady( function(){ Ext.get("evtBtn").on("click",openWin);//监听按钮的click事件 Ext.get("evtBtn").on("click",openWin,this,{delay:5000});//延迟执行事件 } ); </script> <body> <input type="button" id="evtBtn" value="点我，吓死你"/> </body> </html>

执行5秒后，用鼠标移开，会看到两个窗口。结果如下：

EXT JS点滴（3）EXT JS 事件机制

vue项目获取富文本编辑器wangEditor内容导出为word（html转word格式并下载）

dotnet C# 创建 X11 应用时设置窗口背景颜色

Navicat安装与激活教程

TDengine docker安装方法

vue3组件通信与props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的发布时间

工作中用到的脚本合集

合并代码时Beyond Compare设置

jQuery插件開發模式（一)

EXT JS點滴（1）引入有用的EXT JS內容文件

深表歉意

奇偶文件重新命名

PHP中$GLOBALS['HTTP_RAW_POST_DATA'] 和 $_POST

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結