此文用来记录学习笔记;

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

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

基本事件是什么?就类似于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. CSS3 Media Query

    在移动端火爆的今日,一个好的web应用不仅仅要有对应移动平台的APP,自己web网页也需要对不同屏幕大小的移动设备进行支持,也就是我们所说的响应式web页面. 本篇文章就来介绍下最常见的响应式页面的实 ...

  2. 静态资源库CDN服务

    使用静态资源库可以访问线上资源文件,比如jquery库.bootstrap库.使用百度静态资源库的居多,但是发现百度暂时不支持https协议,bootcdn是一个不错的选择. 百度静态资源公共库 优点 ...

  3. 高级PHP工程师所应该具备一些技能

          很多面试,很多人员能力要求都有"PHP高级工程师的字眼",如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望给初级或已经达到中级的 ...

  4. 从零开始PHP学习 - 第三天

    写这个系列文章主要是为了督促自己  每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...

  5. BOOL、sizeof

    BOOL使用前需要声明 #include <stdbool.h>(这个头文件定义了bool,true,false等宏) int a[5]; sizeof(a[5]),sizeof是关键字, ...

  6. DOCTYPE声明的几种类型

    DOCTYPE声明的几种类型 DOCTYPE 声明决定着浏览器怎么去解析和渲染当前页面,所以对于页面来说是很重要的. HTML5时代,统一用 <!DOCTYPE html> 这样简单的方式 ...

  7. 【转载】Android Studio jar、so、library项目依赖,原文链接http://zhengxiaopeng.com/2014/12/13/Android-Studio-jar、so、library项目依赖/

    前言 Android Studio(以下简称AS)在13年I/O大会后放出预览版到现在放出的正式版1.0(PS.今天又更新到1.0.1了)历时一年多了,虽然Google官方推出的Android开发者的 ...

  8. vb6.0 倒计时

    Dim t Dim start As Boolean Private Sub Command1_Click() If start = False Then t = Val(Text1) * 3600 ...

  9. BC第二场

    GT and sequence  Accepts: 385  Submissions: 1467  Time Limit: 2000/1000 MS (Java/Others)  Memory Lim ...

  10. HDU2159:FATE(二维完全背包)

    Problem Description 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最后一级.现 ...