此文用来记录学习笔记;

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

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

基本事件是什么?就类似于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. SQL 简单练习

    USE study; SELECT * FROM EMP --查询雇员姓名的最后三个字母 ) FROM EMP ; --查询10部门雇员进入公司的星期数 --1 查询部门30中的所有员工 --2 列出 ...

  2. 转 SSH框架搭建详细图文教程

    原址:http://blog.sina.com.cn/s/blog_a6a6b3cd01017c57.html 什么是SSH? SSH对应 struts spring hibernatestruts ...

  3. 树莓派高级GPIO库,wiringpi2 for python使用笔记(五)i2c读取测试

    wiringpi2显然也把i2c驱动带给了Python,手头上正巧有一个DS3231的模块,上边带了一个DS3231 RTC(实时时钟),与一片24C32,两个芯片均为iic总线设备,与树莓派接线如下 ...

  4. 服务器响应HTTP请求状态码(转)

    当服务器响应HTTP请求时,其状态行的信息为HTTP的版本号,状态码,及解释状态码的简单说明: 1.客户方错误: 100 客户必须继续发出请求 101 客户要求服务器根据请求转换HTTP协议版本 2. ...

  5. MySQL Select 优化

    准备: create table t(x int primary key,y int unique,z int); insert into t(x,y,z) values(1,1,1),(2,2,2) ...

  6. 腾讯出品的抓包工具Rythem

    Mac下一直没有fiddler这样好用的抓包工具,Charles要收费,难免不爽,昨天调研国内项目的时候,看到腾讯开源了一款抓包工具Rythem,试用了一下,基本配置无问题,但是通配符方面不太搞的定. ...

  7. J2EE项目中异常处理

     为什么要在J2EE项目中谈异常处理呢?可能许多java初学者都想说:“异常处理不就是try….catch…finally吗?这谁都会啊!”.笔者在初学java时也是这样认为的.如何在一个多层的j2e ...

  8. 315M无线发射模块天线的长度计算

    波长=光速/频率=300/315=0.952米 1/4波长须要的天线长度=波长*1/4=0.952/4=0.238米 考虑导线传播高频信号的缩短率在0.98左右,因此天线长度=0.238*0.98=0 ...

  9. Codeforces 235B Let&#39;s Play Osu! 概率dp(水

    题目链接:点击打开链接 给定n表示有n个格子 以下每一个格子为O的概率是多少. 对于一段连续 x 个O的价值就是 x*x ; 问: 获得的价值的期望是多少. 思路: 把公式拆一下.. #include ...

  10. 假设将synthesize省略,语义特性声明为assign retain copy时,自己实现setter和getter方法

    假设将synthesize省略,而且我们自己实现setter和getter方法时,系统就不会生成相应的setter和getter方法,还有实例变量 1,当把语义特性声明为assign时,setter和 ...