Ext JS学习第十六天 事件机制event(一)

此文用来记录学习笔记;

休息了好几天,从今天开始继续保持更新,鞭策自己学习

今天我们来说一说什么是事件,对于事件,相信你一定不陌生,

基本事件是什么?就类似于click、keypress、focus、mouseover等这些事件都是浏览器定义好的内置事件,我们直接使用即可。对于高级事件,无非就是自己去设计一个事件,就比如我们实际项目中,通常都伴随些业务逻辑,可能是曾删改查等...这些事件都是非原生事件,也就是浏览器无法自行判别触发的。但是我们确实有需求去实现他们,从而让我们开发起来更爽一些。

首先我们来看事件的几种绑定方式:

第一种html方式:很简单直接给出代码

<body>
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()">
</body>

第二种绑定方式:dom方式

首先我们先构造几个按钮

复制代码
<body>
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()"><br>
<input type="button" id="btn2" value="第二种事件绑定方式"><br>
<input type="button" id="btn3" value="第三种事件绑定方式"><br>
<input type="button" id="btn4" value="单击我吧"><br>
<input type="button" id="btn5" value="按钮5">
</body>
复制代码

好了,开始第二种绑定方式,看栗子

复制代码
(function(){
    Ext.onReady(function(){
        if(Ext.isIE){
            document.getElementById("btn2").attachEvent("onclick",function(){
                alert("第二种事件绑定方式");
            });
        }else{
            document.getElementById("btn2").addEventListener("click",function(){
                alert("第二种事件绑定方式");
            });        
        }
        
    })
})();
复制代码

 

第三种绑定方式:Ext方式

复制代码
(function(){
    Ext.onReady(function(){
                Ext.get('btn3').on("click",function(){
            alert("第三种事件绑定方式");
        })
    })
})();
复制代码

明天我们继续学习如何自定义事件进行触发

 

个人 网站 www.fishcmonkey.com

posted on   code&monkey  阅读(1166)  评论(2编辑  收藏  举报

编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容
< 2025年1月 >
29 30 31 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 1
2 3 4 5 6 7 8

导航

统计

个人网站
点击右上角即可分享
微信分享提示