mvc-2事件监听
现代浏览器都支持的事件
- click
- dbclick
- mouseover
- mousemove
- mouseout
- focus
- blur
- change(表单输入框特有)
- submit(表单特有)
addEventListener/removeEventListenr
- 注意如果第二个参数是匿名函数的话,不销毁这个元素节点则监听不会停止;
第三参数 | 对应事件 | 效果 | 取消事件 |
---|---|---|---|
true | 事件捕捉 | 从外向内传播 | |
false | 事件冒泡 | 从内向外传播 | e.stopPropagation() |
- 阻止默认行为:
e.preventDefault() / return false
事件对象
- 事件类型
- bubbles: 表示事件是否通过DOM以冒泡形式触发
- 环境信息属性
- button:表示鼠标所按下的按钮
- 0:左
- 1:中
- ctrlKey/altKey/shiftKey 表示是否按下相应键
- button:表示鼠标所按下的按钮
- 键盘事件属性
- isChar:表示当前按下的键是否表示一个字符
- charCode:表示当键的unicode值(仅对keypress有效)
- keyCode:表示非字符按键的unicode值
- which:表示当前按键的unicode值,不管是否是字符
- 事件发生的环境参数
- pageX/pageY:相对于可视区域的坐标
- screenX,screenY:想对于屏幕的坐标
- 和事件相关的元素
- currentTarget:事件冒泡阶段当前所在的DOM元素
- target,originateTarget:原始的DOM元素
- relatedTarget:其他和事件相关的DOM元素(有的话)
切换上下文
- 在addEventListener()方法中的执行函数中,上下文已经切换到当前监听的节点,如果想改变,请使用之前提到的方法
事件委托
- 从冒泡事件开始就开始了事件委托;可以直接给父元素绑定事件监听
list.addEventListener("click", function(e) {
if(e.currentTarget.tagName == "LI") {
/**/
}
}, false)
自定义事件
以jquery插件为例;下面代码使用自定义事件让代码变得整洁,在点击选项卡时触发一个change.tabs事件,并绑定若干回调方法来修改active类
<ul id="tabs">
<li data-tab="user">Users</li>
<li data-tab="group">Groups</li>
</ul>
<div id="tabsContent">
<div data-tab="user">user</div>
<div data-tab="group">group</div>
</div>
jQuery.fn.tabs = function(control) {
var elem = $(this);
control = $(control);
elem.on("click", "li", function() {
var tabName = $(this).attr("data-tab");
elem.trigger("change.tabs", tabName);
});
elem.on("change.tabs", function(e, tabName) {
elem.find("li").removeClass("active");
elem.find(">[data-tab='" + tabName + "']").addClass("active");
});
elem.on("change.tabs", function(e, tabName) {
control.find(">[data-tab]").removeClass("active");
control.find(">[data-tab='" + tabName + "']").addClass("active");
});
//将切换选项卡的动作和窗口的hash做关联,这样可以使用浏览器的退后按钮
elem.on("change.tabs", function(e, tabName) {
window.location.hash = tabName;
});
$(window).on("hashchange", function() {
var tabName = window.location.hash.slice(1);
elem.trigger("change.tabs", tabName);
})
var firstName = elem.find("li:first").attr("data-tab");
elem.trigger("change.tabs", firstName);
return this;
}
$("ul#tabs").tabs("#tabsContent");
DOM无关事件
- 基于事件的编程可以使应用框架充分解耦,事件本质上是和DOM无关的,因此可以开发事件驱动的库;
- 这种模式称为发布/订阅的消息模式,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个信道名称;
- 应用这种模式只需要记录回调和事件名称的对应关系及调用他们的方法;
var PubSub = {
//订阅
subscribe: function(ev, callbacks) {
//双重赋值
var calls = this._callbacks || (this._callbacks = {});
(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callbacks);
return this;
},
//发布
publish: function() {
var args = Array.prototype.slice.call(arguments, 0);
var ev = args.shift();
var list, calls, i, l;
if(!(calls = this._callbacks)) return this;
if(!(list = this._callbacks[ev])) return this;
for(i = 0, l = list.length; i < l; i++) list[i].apply(this, args);
return this;
}
}
PubSub.subscribe("wem", function() {});
PubSub.publish("wem");
//可以使用命名空间的方式管理事件名称
PubSub.subscribe("user:create", function() {});
将其扩充到一个局部对象
var Asset = {};
jQuery.extend(Asset, PubSub);
Asset.subscribe("test", function() {alert("test")});
Asset.publish("test");
使用jquery实现该模式
(function($) {
var o = $({});
$.subscribe = function() {
o.bind.apply(o, arguments);
};
$.unsubscribe = function() {
o.unbind.apply(o, arguments);
};
$.publish = function() {
var arguments = $.makeArray(arguments);
var type = arguments[0];
arguments.shift();
o.trigger.apply(o, [type, arguments]);
}
})(jQuery);
$.subscribe("/some/topic", function(event, a, b, c) {
console.log(event.type, a + b +c);
});
$.publish("/some/topic","a","b","c");
mvc-2事件监听的更多相关文章
- 第34天学习打卡(GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 )
GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...
- Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...
- 4.JAVA之GUI编程事件监听机制
事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- .NET事件监听机制的局限与扩展
.NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...
- 让 select 的 option 标签支持事件监听(如复制操作)
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- java 事件监听 - 鼠标
java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...
- java 事件监听 - 键盘
java 事件监听 - 键盘 //事件监听 //键盘事件监听,写了一个小案例,按上下左右,改变圆形的位置,圆形可以移动 import java.awt.*; import javax.swing.*; ...
随机推荐
- Zhulina 的高分子刷理论
高分子刷的解析平均场理论有两种表述方式.一个是MWC理论(Macromolecules 1988, 21, 2610-2619),另外一个就是Zhulina和Birshtein这两位俄罗斯老太太的理论 ...
- 如何实现在已有代码之后添加逻辑之java动态代理
在上篇博客中讨论到java的静态代理, 就是通过组合的方法,前提是委托类需要实现一个接口,代理类也实现这个这个 接口,从何组合两个类,让代理类给委托类添加功能! 知道java的静态代理,我们又遇到一个 ...
- ruby代码重构第一课
(文章是从我的个人主页上粘贴过来的, 大家也可以访问我的主页 www.iwangzheng.com) 新手写代码的时候往往会出现很多重复的代码没有提取出来,大师高瞻远瞩总能提点很多有意义的改进,今天重 ...
- 如何修改git的当前登录信息
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 之前用的大师的git登录名,后来开通了自己的,需要换成自己的,其实修改方式很简单. $vim .gi ...
- 学号160809212姓名田京诚C语言程序设计实验2选择结构程序设计
编写一个C程序,输入3个数,并按由大到小的顺序输出. 1 #include <stdio.h> void main(){ int a,b,c,t; printf("请输入三个整数 ...
- myeclipse2014集成SVN
团队合作的项目肯定少不了版本控制,那么现在就看看myeclispe中是如何使用的吧. 开发环境:myeclipse 2014 java 8 tomcate 8 试了网上说的几种方法,都没有成功,最 ...
- The CompilerVersion constant identifies the internal version number of the Delphi compiler.
http://delphi.wikia.com/wiki/CompilerVersion_Constant The CompilerVersion constant identifies the in ...
- [原创]DELPHI木马DIY之生成服务端
文章作者:上帝的禁区信息来源:邪恶八进制信息安全团队(www.eviloctal.com)DELPHI木马DIY之生成服务端 我在这里就生成简单的服务端,为什么不先讲服务端的隐藏?因为我觉得生成服 ...
- 数据结构与算法实验题7.1 M 商人的求救
问题描述:A 国正面临着一场残酷的战争,城市被支持不同领导的两股势力占据,作为一个商人,M先生并不太关心政治,但是他知道局势很严重,他希望你能救他出去.M 先生说:“为了安全起见,我们的路线最多只能包 ...
- CC MayClg 15 T3
www.codechef.com/MAY15/problems/CHAPD 一道比较神奇的题目... 看到题目后自己yy出了个傻逼算法...然后对拍都是对的...提交都是错的...然后一看" ...