正文
$.Event 你不知道的用法
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
最近在使用Bootstrap.js,一不小心趴开源码看了一下,尤其是看到tab.js
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
}) var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
}) $previous.trigger(hideEvent)
$this.trigger(showEvent)
看到这里的时候,顿时一头雾水!然后立马去查了jquery的官方API(http://api.jquery.com/category/events/event-object/),发现原来jQuery.Event 构造器暴露出来,然后通过$.trigger来触发,然后来了个简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Event</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<input type="text" id="input-1" />
<script>
$(function(){
var e = jQuery.Event( "keydown",{name:65});
$("#input-1").on("keydown",function(event){
console.log(event.name);//初始化的时候输出 65 ,以后每次keydown都是undefined
})
$( "#input-1" ).trigger( e );
})
</script>
</body>
</html>
虽然keydown事件中event.name明显是不存在,但是我们通过$.Eevent依然可以输出值65,也就是$.Event通过trigger默认触发事件把属性name绑定到keydown的事件,所以页面加载的时候就输出65,如果你此刻再去对input进行keydown 就显示undefined,根据jQuery官网翻译知道传入的参数的参数可以根据事件的情况而变化,可以是altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, view, which
同样我们来拆解bootstrap中tab.js,我们仿造其原理制作如下函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Event</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<input type="text" id="input-1" />
<script>
+function($){
function testEvent(){
var hidden = jQuery.Event( "hide.bs",{
user:"foo",
pass:"bar",
relatedTarget: $("#input-1")[0]
});
$( "#input-1" ).trigger(hidden);
}
$("#input-1").on("click",testEvent);
}(jQuery)
$(function(){
$( "#input-1" ).on("hide.bs",function(event){
alert(event.relatedTarget.tagName)//INPOUT
alert(event.user)//foo
})
})
</script>
</body>
</html>
事实证明$.Event在自定义函数上面有很强大的 功能存在,通过relatedTarget来指向对应事件的目标DOM元素,如果你看了bootstrap的tab的案例,瞬间就会觉得此功能作用甚大,可是不经间发现了transition.js中对于$.Event的用法让人大吃一惊,在原生js中有handleEvent(IE9+支持)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Handler 事件</title>
</head>
<body>
<button id="btn-1">点击执行click事件</button>
<input type="text" id="input-1" />
<script type="text/javascript">
var Events={
handleEvent: function(event) {
switch (event.type) {
case "click":
this.clickEvent(event);
break;
case "focus":
this.focusEvent(event);
break;
}
},
clickEvent:function(){
alert("执行了click的事件");
},
focusEvent:function(){
alert("执行了focus的事件");
}
}
if(window.addEventListener){
document.getElementById("btn-1").addEventListener("click",Events,false);
document.getElementById("input-1").addEventListener("focus",Events,false);
}
</script>
</body>
</html>
同样作为大名鼎鼎的jquery,一定也实现了这种方式,果不其然,在transtion.js中可以看到赤裸裸的如何实现这样的方式,同样我们按照transtion.js做了一个精简来执行下面函数
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>handlerEvent</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css">
</head> <body>
<button id="btn-1">按钮-1</button>
<script type="text/javascript">
(function($) {
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return {
end: transEndEventNames[name]
}
}
}
return false // explicit for ie8 ( ._.)
}
$.fn.emulateTransitionEnd = function(duration) {
$(this).one('bsTransitionEnd', function() {
alert("执行one('bsTransitionEnd')自定义事件");
})
//在webkit的条件下$.support.transition.end=webkitTransitionEnd
$(this).trigger($.support.transition.end) }
$(function() {
$.support.transition = transitionEnd();
if (!$.support.transition) return;
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function(e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
})(jQuery)
$(function(){
$("#btn-1").emulateTransitionEnd();
}) </script>
</body> </html>
通过$.event.special.bsTransitionEnd的方式来查找对应执行函数,这个其实就是原声js 的 handleEvent的jQuery实现方式!有时候一个点就可以带出一个面!
随机推荐- 禁用ViewPager边界滑动效果(转)
反射设置方法 private EdgeEffectCompat leftEdge; private EdgeEffectCompat rightEdge; public void DisableLRS ...
- 【求助】WPF 在XP下 有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
- Xcode 插件失效
1.终端输入: 如果放在了应用程序里,就是这个: defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityU ...
- 阿里云 centos 安装apache和php
mysql使用阿里云的rds httpd服务 1. 安装apr和apr-util 2. 安装 httpd apache.org,apr.apache.org 安装命令: ./configure --p ...
- HDOJ-ACM1013(JAVA)
这道题也很简单~主要是将输入转为字符串(存储大数,操作字符数组) 题意: 24 : 2 + 4 = 6 输出6 39 : 3 + 9 = 12 , 1 + 2 = 3 输出3 999: 9 + 9 ...
- MongoDB的备份和部署 高级功能索引,聚合复制,分片
创建备份 MongoDB 数据转储 为了在 MongoDB 中创建数据库备份,需要使用 mongodump 命令.该命令会将服务器上的所有数据都转储到 dump 目录中.你可以使用很多选项来限制转储的 ...
- Pycharm新建模板默认添加作者时间等信息
在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings 2. ...
- [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project triage: Compilation failure [ERROR] No compiler is provided in this environment.
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-c ...
- [BZOJ3011][Usaco2012 Dec]Running Away From the Barn
题意 给出一棵以1为根节点树,求每个节点的子树中到该节点距离<=l的节点的个数 题解 方法1:倍增+差分数组 首先可以很容易的转化问题,考虑每个节点对哪些节点有贡献 即每次对于一个节点,找到其第 ...
- java解析文件
遇到两个小坑: 1.使用String.split,部分分隔符需要转义:https://www.cnblogs.com/mingforyou/archive/2013/09/03/3299569.htm ...
反射设置方法 private EdgeEffectCompat leftEdge; private EdgeEffectCompat rightEdge; public void DisableLRS ...
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
1.终端输入: 如果放在了应用程序里,就是这个: defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityU ...
mysql使用阿里云的rds httpd服务 1. 安装apr和apr-util 2. 安装 httpd apache.org,apr.apache.org 安装命令: ./configure --p ...
这道题也很简单~主要是将输入转为字符串(存储大数,操作字符数组) 题意: 24 : 2 + 4 = 6 输出6 39 : 3 + 9 = 12 , 1 + 2 = 3 输出3 999: 9 + 9 ...
创建备份 MongoDB 数据转储 为了在 MongoDB 中创建数据库备份,需要使用 mongodump 命令.该命令会将服务器上的所有数据都转储到 dump 目录中.你可以使用很多选项来限制转储的 ...
在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择File-Settings 2. ...
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-c ...
题意 给出一棵以1为根节点树,求每个节点的子树中到该节点距离<=l的节点的个数 题解 方法1:倍增+差分数组 首先可以很容易的转化问题,考虑每个节点对哪些节点有贡献 即每次对于一个节点,找到其第 ...
遇到两个小坑: 1.使用String.split,部分分隔符需要转义:https://www.cnblogs.com/mingforyou/archive/2013/09/03/3299569.htm ...