此文用来记录学习笔记;

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

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

基本事件是什么?就类似于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(一)的更多相关文章

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

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. Ext JS学习第十七天 事件机制event(二)

    此文仅有继续学习笔记: 昨天说了三种邦定事件的方法,今天说一下自定义事件 假设现在又这样的情景一个自定义的事件 没有用到事件处理的场景        母亲问孩子和不饿->             ...

  3. Ext JS学习第十天 Ext基础之动态加载JS文件(补充)

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  4. Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)

    此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...

  5. Ext JS学习第十五天 Ext基础之 Ext.DomQuery

    此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...

  6. Ext JS学习第十四天 Ext基础之 Ext.DomHelper

    此文用来记录学习笔记   •我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具 ...

  7. ExtJs的事件机制Event(学员总结)

    一.事件的三种绑定方式 1.HTML/DHTML 在标签中直接增加属性触发事件 [javascript] view plaincopy <script type="text/javas ...

  8. 锁机制(Lock) 信号量机制(Semaphore) 事件机制(Event)

    IPC  进程间通信(inter-Process Communicate) 锁机制(Lock) l = Lock() 开启一个锁机制(实例化)   一把锁配一个钥匙 l.acquire()  获得钥匙 ...

  9. 【iScroll源码学习03】iScroll事件机制与滚动条的实现

    前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...

随机推荐

  1. RequireJS 和 SeaJS

    RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的 ...

  2. webp 初探

    WebP是Google新推出的影像技术,它可让网页图档有效进行压缩,同时又不影响图片格式兼容与实际清晰度,进而让整体网页下载速度加快. 如果我们能将其应用在现有的图片上,将可以进一步减少图片大小加快页 ...

  3. Azure 网站上的 Java

     编辑人员注释:本文章由Windows Azure 网站团队的项目经理Chris Compy 撰写. Microsoft 已推出针对 Azure 网站上基于 Java 的网站的支持.此功能旨在通过 ...

  4. 再学习sqlhelper

    在机房收费重构系统的时候,第一次学习sqlhelper.当时感觉比较简单,没有写博客总结,现在又经过了图书馆的学习,感觉还是有必要写一写的. SqlHelper是一个基于.NETFramework的数 ...

  5. POJ 1556 The Doors(计算几何+最短路)

    这题就是,处理出没两个点.假设能够到达,就连一条边,推断可不能够到达,利用线段相交去推断就可以.最后求个最短路就可以 代码: #include <cstdio> #include < ...

  6. MongoDB(三)mongoDB下载和安装

    软件下载 下载mongodb最新的包:http://www.mongodb.org/downloads 下载mongodb可视化界面,mongoVUE:http://download.csdn.net ...

  7. js小写转实现资本,js数字革命万元

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>  <hea ...

  8. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  9. 经典mssql语句大全

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  10. objective-C学习笔记(八) 集合类型 Collection Types

    OBJC的集合类型: 1.数组 Array 2.Set 3.键值对 Dictionary 数组:OC中的数组被定义为class,引用类型.索引从0开始,访问越界会抛出运行时异常. NSArray的元素 ...