JS 控件事件小结

概述：

事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的。

事件机制

对于事件的机制我不想多说，各种语言中对事件的描述都很具体，都是观察者模式的一种实现，我们可以从中抽取出事件必须的接口（由于控件库是基于jQuery 所以接口跟jquery保持一致）：

1.on: 绑定事件

2.off: 删除事件

3.fire: 触发事件

4.addTarget : 添加冒泡的对象

5.publish: 允许事件冒泡

jQuery 中的事件

jQuery 中的事件功能缺失很丰富，但是必须是jQuery对象才支持，我们自己定义的控件类无法直接使用jQuery的事件，事件的上下文也有问题，所以我们需要自己封装控件的事件。

jQuery 中的 Callbacks 是 1.7中添加的用于回调的机制，使用起来很方便，但是问题也是指定上下文需要在触发时指定，我们可以将其封装到我们自己的事件类中。

绑定事件：

函数原型: function on(eventType,callback) 参数：
1.eventType : 事件类型
2.callback ： 回调函数
3.scope : 回调函数的上下文，这个变量在真正的控件绑定过程中使用的非常少，而且都有替代方案，所以为了简单起见，scope变量在此函数和下面的所有函数中就引入了。

上面回调函数的上下文是绑定事件的控件本身

删除绑定：
函数原型 ： function off(eventType,callback) 参数同上：

1.eventType : 事件类型
2.callback ： 回调函数，此变量省略时，删除这个事件类型的所有绑定函数。
在真正的控件开发和使用过程中，删除事件比绑定事件要麻烦的多，删除事件时，你需要有绑定事件时函数的引用，如果需要频繁删除添加同一个事件时请考虑使用delegate

触发事件
函数原型： fire(eventType) :

1. eventType : 事件类型，绑定到对象上的此类型的函数执行。

这里有2点需要注意：

1.触发事件的方式，我们这里使用 ‘stopOnFalse'的方式，也就是绑定在同一个事件类型下的函数顺序执行，如果有一个返回值为false，那么下面的函数终止执行。其他触发事件的方式参考 jquery 的 Callbacks 。

2.事件的是否冒泡执行，也就是说，如果一个控件有多个子控件，那么子控件触发点击事件时可以冒泡到父类控件，我们只需要监听父类的冒泡事件即可

事件冒泡

函数原型： function(eventType,bubble) ：

1.eventType : 事件类型
2.bubble : 是否冒泡

此函数与 function addTarget(control) 相匹配使用。

addTarget 添加事件冒泡到的对象上，控件实现中，默认指定控件的父控件作为其冒泡的对象。

上面触发事件中讲到的，允许控件事件冒泡有很多好处：

1. 事件绑定后，子控件的添加删除不受影响

2. 事件使用更加方便，不需要去了解控件的内部

跟事件冒泡对应的是委托(delegate和 undelegate)，委托依赖于事件冒泡，DOM的事件机制和jQuery都支持委托，这是因为浏览器本身对DOM 事件冒泡的支持，而我们在控件上实现的事件冒泡机制足够我们实现委托的效果，所以委托的接口我们就不实现了。

事件代码实现

具体的代码实现和一些帮助方法我写到下面的代码中，不便于在文章中展开，感兴趣的可以看一下，后面的控件库都是基于这些帮助方法和事件对象的。文件里面的其他帮助方法，在其他章节讲解。

赞 (0)

相关推荐

  • 如何让div span等元素能响应键盘事件操作指南

    在我这几天的工作中遇到了一个问题,google了一下找到了解决方案,不过是英文的,我简单翻译下让更多的人能看懂 译文如下: 我有一个可编辑的div,并且在DIV里面还有一个可编辑的span,我想要让span能响应键盘事件, 这里是测试JS代码: 复制代码 代码如下: $(function() { $('#someid').keypress(function(event){alert('test');}); }); 这里是测试html代码: 复制代码 代码如下: <div id="mydiv

  • JavaScript高级程序设计 阅读笔记（十七） js事件

    一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

  • js事件(Event)知识整理

    js事件(Event)知识整理

    鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedown 当设备弹起的时候触发mouseup 目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条..)触发scroll 滚动滚轮触发mousewheel,这个要区别于scroll 鼠标移出元素的那一刻,触发mouseout 事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式

  • js模拟点击事件实现代码

    html: 复制代码 代码如下: <h3>请单击"提交",测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#" method="get" id="form"> <input type="text" name="site"

  • javascript 事件处理程序介绍

    1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------

  • JS事件Event元素(兼容IE,Firefox,Chorme)

    JS事件Event元素(兼容IE,Firefox,Chorme)

    好的程序往往是兼容多种浏览器的. 看下例: 一个简单的button,我们可以通过点击下面的button直接通过event对象得到当前的button元素,兼容多浏览器.当然,其他元素事件的写法同. <input type="button" id="btn" name="btn" value="button1" onclick="getEvent(event)"/>

  • JS 控件事件小结

    概述: 事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点.所以创建一套事件是我们写控件之前要做的. 事件机制 对于事件的机制我不想多说,各种语言中对事件的描述都很具体,都是观察者模式的一种实现,我们可以从中抽取出事件必须的接口(由于控件库是基于jQuery 所以接口跟jquery保持一致): 1.on: 绑定事件 2.off: 删除事件 3.fire: 触发事件 4.add

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

  • JS控件的生命周期介绍

    JS控件的生命周期介绍

    JS控件的生命周期跟其他平台UI的生命周期类似,但是又有自己的特点,我们只有将控件的生命周期划分清晰,所有的控件编写.mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理.在这里我把JS的生命周期定义为4部分: 1.initializer: 初始化,做一些不牵扯DOM操作的初始化操作 2.createDom: 创建 DOM,在这个过程中我们创建控件需要的DOM结构 3.renderUI: 生成控件的内部元素,在这里调用子控件的渲染方法,开启子控件的生命周期 4.bindUI:

  • Active控件问题小结(附解决办法)

    Active控件问题小结(附解决办法)

    ActiveX 控件是允许网站提供视频等内容的网站. 当你浏览 Web 时,它们允许你使用工具栏.股票代号.视频和其它内容. 但是,这些程序有时可能出现问题,或者向你提供不需要的内容. 在某些情况下,这些程序可用于从计算机收集信息.损坏计算机上的信息.在未经你同意的情况下在计算机上安装软件或使其他人远程控制计算机. ActiveX 筛选可防止网站安装和使用这些程序. 自己写了一个后台管理界面,在chrome浏览器中正常显示,但在360安全浏览器中浏览时,效果出不来,提示有问题 然后我点击允许操作

  • 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

    如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct

  • jQuery操作表单常用控件方法小结

    本文实例总结了jQuery操作表单常用控件方法.分享给大家供大家参考.具体如下: 下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion <input type="radio" name="rd" id="rd1" checked="checked" value="rd1" /&

  • 日期 时间js控件

    复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

  • JS控件bootstrap datepicker使用方法详解

    JS控件bootstrap datepicker使用方法详解

    bootstrap-datepicker沙箱环境: bootstrap-datepicker沙箱环境: 1.requirejs配置 requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 urlArgs:'v=2016110701', paths: { jquery: ["../../plugins/jquery/jquery

  • iOS App开发中的UIPageControl分页控件使用小结

    分页控件是一种用来取代导航栏的可见指示器,方便手势直接翻页,最典型的应用便是iPhone的主屏幕,当图标过多会自动增加页面,在屏幕底部你会看到原点,用来只是当前页面,并且会随着翻页自动更新. 一.创建 复制代码 代码如下: UIPageControl* myPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0.0, 400.0, 320.0, 0.0)]; 二.设置属性 页面数目 复制代码 代码如下: myPageContr

  • JS控件bootstrap suggest plugin使用方法详解

    JS控件bootstrap suggest plugin使用方法详解

    本文为大家分享了bootstrap-suggest-plugin插件,这是一个简单的编辑提示控件,供大家参考,具体内容如下 bootstrap-suggest-plugin插件地址 页面如下面所示,使用此控件 <div class="form-group"> <label class="col-xs-3 text-right control-label">库管员:</label> <div class="col-x

随机推荐