您的位置：首页 > Web前端 > Node.js

Ext JS学习第十六天事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例第十五节：深入理解async和await的作用及各种适用场景和用法第十五节：深入理解async和await的作用及各种适用场景和用法前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

2018-07-07 19:14 1146 查看

code&monkey

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Ext JS学习第十六天 事件机制event（一）

Ext JS学习第十六天事件机制event（一）