JQuery触发事件使代码分离
在js中,如果我们要触发一个按钮的点击事件,直接使用元素的onclick事件,然后调用相关函数就可以了,这样的 写法则是让代码与html结合到一起了,在Jquery中就不用这样了,它有另外的几种写法,可以使代码与html分开:
比如页面中有一个按钮:<input id="btn" type="button" value="提交" />
我们要触发它的点击事件可以有下面两种方式:
一:jQuery(function($){
$("#btn").click(function(){alert("这是触发事件的第一种方式")})
})
直接获得元素,然后调用click方法就可以了,函数在事件里面写
二:jQuery(document).ready(function()
{
$("#btn1").bind("click",function(event){
alert("这是触发事件的第二种方式")
})
} )
这种方法是绑定事件
上面两种方式都可以,其中click可以换成其他的blur,focus等事件
如果是一个元素要触发两次事件,比如失去焦点,获取焦点,在js中要用到onfocus和onblur事件,在jquery中直接连续添加即可
代码如下 | 复制代码 |
$(function(){ $("#txtName").focus(function(){ $("#txtName").attr("value",""); }).blur(function(){ $("#txtName").addClass("aa"); }); }) |
或者
代码如下 | 复制代码 |
$(function(){ $("#txtName").focus(function(){ $(this).attr("value",""); }).blur(function(){ $(this).addClass("aa"); }); }) |
this代表当前元素
或者使用bind绑定两次事件都可以
触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户点击,达到的效果与真实的鼠标点击是一样的。在事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。如下
代码如下 | 复制代码 |
... dispatch = w3c ? function(el, type){ try{ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt); }catch(e){alert(e)}; } : function(el, type){ try{ el.fireEvent('on'+type); }catch(e){alert(e)} }; ... |
jQuery则完全没有用到dispatchEvent/fireEvent方法。它采用的是另外一种机制。
jQuery触发事件的核心方法是jQuery.event.trigger。它提供给客户端程序员使用的触发事件方法有两个:trigger/triggerHandler
一个事件的发生在某些元素中可能会导致两种动作,一个是默认行为,一个是事件handler。如链接A
代码如下 | 复制代码 |
<a href="http://mail.sina.com.cn" οnclick="alert(1);">新浪邮箱</a> |
点击后,弹出1(事件handler),点确定跳转(默认行为)到了mail.sina.com.cn。因此,设计的触发事件的函数要考虑到这两种情况。
jQuery使用.trigger和.triggerHandler区分了这两种情况:
trigger 执行事件hanlder/执行冒泡/执行默认行为
triggerHandler 执行事件handler/不冒泡/不执行默认行为
.trigger/.triggerHandler的源码如下
代码如下 | 复制代码 |
trigger: function( type, data ) { return this.each(function() { jQuery.event.trigger( type, data, this ); }); }, triggerHandler: function( type, data ) { if ( this[0] ) { return jQuery.event.trigger( type, data, this[0], true ); } }, |
可以看出,两者都调用jQuery.event.trigger。调用时一个没有传true,一个传了。传了true的triggerHander就表示仅执行事件handler。
此外还需注意一点区别:trigger是对jQuery对象集合的操作,而triggerHandler仅操作jQuery对象的第一个元素。如下
代码如下 | 复制代码 |
<p>p1</p> <p>p1</p> <p>p1</p> <script> $('p').click(function(){alert(1)}); $('p').trigger('click'); // 弹3次,即三个p的click都触发了 $('p').triggerHandler('click'); // 仅弹1次,即只触发第一个p的click </script> |
好了,是时候贴出jQuery.event.trigger的代码了
代码如下 | 复制代码 |
trigger: function( event, data, elem, onlyHandlers ) { // Event object or event type var type = event.type || event, namespaces = [], exclusive; ...... } |
这就是jQuery.event.trigger的定义,省略了大部分。下面一一列举
代码如下 | 复制代码 |
if ( type.indexOf("!") >= 0 ) { // Exclusive events trigger only for the exact event (no namespaces) type = type.slice(0, -1); exclusive = true; } |
这一段是为了处理trigger('click!')的情形,即触发非命名空间的事件。变量exclusive挂在事件对象上后在jQuery.event.handle内使用。举个例子
代码如下 | 复制代码 |
function fn1() { console.log(1) } function fn2() { console.log(2) } $(document).bind('click.a', fn1); $(document).bind('click', fn2); $(document).trigger('click!'); // 2 |
为document添加了两个点击事件,一个是具有命名空间的"click.a",一个则没有"click"。使用trigger时参数click后加个叹号"!"。从输出结果为2可以看出不触发命名空间的事件。总结一下:
trigger('click') 触发所有的点击事件
trigger('click.a') 仅触发“click.a” 的点击事件
trigger('click!') 触发非命名空间的点击事件
接着看
代码如下 | 复制代码 |
if ( type.indexOf(".") >= 0 ) { // Namespaced trigger; create a regexp to match event type in handle() namespaces = type.split("."); type = namespaces.shift(); namespaces.sort(); } |
这段就很好理解了,就是对trigger('click.a')的处理,即对具有命名空间事件的处理。
接着看
代码如下 | 复制代码 |
if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { // No jQuery handlers for this event type, and it can't have inline handlers return; } |
对于一些特殊事件如"getData"或对于已经触发过的事件直接返回。
往下
代码如下 | 复制代码 |
event = typeof event === "object" ? // jQuery.Event object event[ jQuery.expando ] ? event : // Object literal new jQuery.Event( type, event ) : // Just the event type (string) new jQuery.Event( type ); |
有三种情况
event 本身就是jQuery.Event类的实例
event是个普通js对象(非jQuery.Event类的实例)
event是个字符串,如"click"
续
代码如下 | 复制代码 |
event.type = type;
|
需要注意exclusive/namespace/namespace_re挂到了event上了,在jQuery.event.handle中可以用到(事件命名空间)。
往下是
代码如下 | 复制代码 |
// triggerHandler() and global events don't bubble or run the default action if ( onlyHandlers || !elem ) { event.preventDefault(); event.stopPropagation(); } onlyHandlers 只在 triggerHandler用到了,即不触发元素的默认行为,且停止冒泡。 |
下面是
代码如下 | 复制代码 |
// Handle a global trigger if ( !elem ) { // TODO: Stop taunting the data cache; remove global events and always attach to document jQuery.each( jQuery.cache, function() { // internalKey variable is just used to make it easier to find // and potentially change this stuff later; currently it just // points to jQuery.expando var internalKey = jQuery.expando, internalCache = this[ internalKey ]; if ( internalCache && internalCache.events && internalCache.events[ type ] ) { jQuery.event.trigger( event, data, internalCache.handle.elem ); } }); return; } |
这里是个递归调用。如果没有传elem元素,那么从jQuery.cache里取。
接着是
代码如下 | 复制代码 |
// Don't do events on text and comment nodes if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; } |
属性,文本节点直接返回。
下面是
代码如下 | 复制代码 |
// Clone any incoming data and prepend the event, creating the handler arg list data = data != null ? jQuery.makeArray( data ) : []; data.unshift( event ); |
先将参数data放入数组,event对象放在数组的第一个位置。
接着是
代码如下 | 复制代码 |
// Fire event on the current element, then bubble up the DOM tree do { var handle = jQuery._data( cur, "handle" ); event.currentTarget = cur; if ( handle ) { handle.apply( cur, data ); } // Trigger an inline bound script if ( ontype && jQuery.acceptData( cur ) && cur[ ontype ] && cur[ ontype ].apply( cur, data ) === false ) { event.result = false; event.preventDefault(); } // Bubble up to document, then to window cur = cur.parentNode || cur.ownerDocument || cur === event.target.ownerDocument && window; } while ( cur && !event.isPropagationStopped() ); |
这段代码很重要,做了以下事情
取handle
执行
执行通过onXXX方式添加的事件(如οnclick="fun()")
取父元素
while循环不断重复这四步以模拟事件冒泡。直到window对象
接下是
代码如下 | 复制代码 |
// If nobody prevented the default action, do it now if ( !event.isDefaultPrevented() ) { var old, special = jQuery.event.special[ type ] || {}; if ( (!special._default || special._default.call( elem.ownerDocument, event ) === false) && !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { // Call a native DOM method on the target with the same name name as the event. // Can't use an .isFunction)() check here because IE6/7 fails that test. // IE<9 dies on focus to hidden element (#1486), may want to revisit a try/catch. try { if ( ontype && elem[ type ] ) { // Don't re-trigger an onFOO event when we call its FOO() method old = elem[ ontype ]; if ( old ) { elem[ ontype ] = null; } jQuery.event.triggered = type; elem[ type ](); } } catch ( ieError ) {} if ( old ) { elem[ ontype ] = old; } jQuery.event.triggered = undefined; } } |
这一段是对于浏览器默认行为的触发。如form.submit(),button.click()等。
注意,由于Firefox中链接的安全性限制,jQuery对链接的默认行为都统一设计为不能触发。即不能通过trigger()使链接跳转。
Jquery 监视按键、回车键触发事件的实例
代码示例:
代码如下 | 复制代码 |
<script type="text/javascript"> $(function () { $('input:text:first').focus(); //把焦点放在第一个文本框 var $inp = $('input'); //所有的input元素 $inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件。 var key = e.which; //e.which是按键的值 if (key == 13) { alert("aaa"); } }); }); |
拖了一个Login控件,然后给它转化为template,用于自定义开发。
以上代码中捕捉到了文本栏的回车按键,这时要去触发LoginButton来提交登录信息进行验证,可是使用$("[id$=LoginButton]").click();只在firefox上有效,在IE无效,歪打正着的尝试一下$("[id$=LoginButton]").focus();,在ie下有效,在IE上focus()即完成了对焦又执行了点击,这是为什么呢?
代码如下 | 复制代码 |
$inp.keypress(function (event) { var key = event.which; if (key == 13) { $("[id$=LoginButton]").click(); //支持firefox,IE武校 //$('input:last').focus(); $("[id$=LoginButton]").focus(); //支持IE,firefox无效。 //以上两句实现既支持IE也支持 firefox } }); |