jquery 触发onhove事件 jquery触发点击事件click

转载

mob64ca141677f9 2023-10-09 21:41:18

文章标签 jquery 触发onhove事件 jQuery 点击事件命名空间 文章分类 jQuery 前端开发

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; event.exclusive = exclusive; event.namespace = namespaces.join("."); event.namespace_re = new RegExp("(^\|.)" + namespaces.join(".(?:.*.)?") + "(.\|$)");`

需要注意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
     }
 });

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。