现代浏览器都支持的事件

  • 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 表示是否按下相应键
  • 键盘事件属性
    • 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事件监听的更多相关文章

  1. 第34天学习打卡(GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 )

    GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...

  2. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  3. 4.JAVA之GUI编程事件监听机制

    事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...

  4. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  5. .NET事件监听机制的局限与扩展

    .NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...

  6. 让 select 的 option 标签支持事件监听(如复制操作)

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  7. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  8. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  9. java 事件监听 - 鼠标

    java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...

  10. java 事件监听 - 键盘

    java 事件监听 - 键盘 //事件监听 //键盘事件监听,写了一个小案例,按上下左右,改变圆形的位置,圆形可以移动 import java.awt.*; import javax.swing.*; ...

随机推荐

  1. [原] Android持续优化 - 提高流畅度

    一.形象的感官一下流畅度概念 1. 这是官方给出的概念:Android流畅运行,需要运行60帧/秒, 则需要每帧的处理时间不超过16ms. 2. 每秒帧数,实际上就是指动画或视频每秒放映的画面数.因此 ...

  2. sql复制数据表和表结构

    SQL复制数据表 (select * into 与 insert into) select * into 目标表名 from 源表名 insert into 目标表名(fld1, fld2) sele ...

  3. POJ 2418 Hardwood Species

                                                     Hardwood Species Time Limit: 10000MS   Memory Limit ...

  4. VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

  5. Python os.system 和 os.popen的区别

    (1) os.system # 仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息 system(command) -> exit_statusExecute the command ...

  6. FOJ 1075

    #include<stdio.h> #include<iostream> using namespace std; ]={,}; ]={}; void func() { ,fl ...

  7. php友好格式化时间

    php格式化时间显示 function toTime($time) {//$time必须为时间戳 $rtime = date("Y-m-d H:i",$time); $htime ...

  8. fsck检查和修复文件系统

    重视:fsck不能乱用.先要把文件系统umount掉,然后检查.最好启动到单用户模式下fsck. 常见的5种损坏类型 1 未被引用的inode 2 难以置信的超大链接数 3 没有记录在磁盘块映射表中的 ...

  9. win平台检查内存泄露

    int main() { _CrtSetDbgFlag(_CrtSetDbgFlag(_CRTDBG_REPORT_FLAG) | _CRTDBG_LEAK_CHECK_DF); _CrtSetBre ...

  10. poj 2136 Vertical Histogram 解题报告

    题目链接:http://poj.org/problem?id=2136 题意不难理解,就是输入四行字符串(每行字符总数不超过72个),统计26个英文字母的数目,并按柱状图的形式输出.我的思路就是,先用 ...