JavaScript和jQuery的事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript和jQuery的事件相关的知识,希望对你有一定的参考价值。

一、添加事件监听函数-javascript

1.元素标签里直接写js代码

<body onload="var i=1; alert(i);">
</body>

2.标签里写函数名

<head>
    <script>
      function hi(){
         alert("hi");
      }
    </script>
</head>
<body onload="hi();">
</body>

以上两种方式本质是一样的,被称为内联模式,效率最低。

3.js脚本里给事件属性指定函数

window.onload = hi;

这种方法称为传统模式,只能注册一个事件,再多会被覆盖。内联模式和传统模式都属于DOM Level 0事件模型,已经不被推荐。

4.不依赖元素属性的监听器

if(obj.addEventListener) {
     obj.addEventListener("click",clickFunc,false);
} else if(obj.attachEvent) {
     obj.attachEvent("onclick",clickFunc);
} else {
     obj.onclick = clickFunc;
}

这种方式属于DOM Level 2事件模型,可以注册多个事件处理函数,按注册顺序执行。

二、添加事件监听函数-jQuery

1.$(selector).event([data],callback)

2.$(selector).bind(event,[data],callback) 

   $(selector).unbind(event,callback)  不指定event将将移除该event上所有事件。

3.$(selector).one(event,[data],callback)  绑定事件只会触发一次。

4.$(selector).delegate(childElement,event,[data],callback) 委托给子元素(没理解透)

5.$(selector).on(event,[data],callback)  据说上面的方法都调用了它

 

三、事件传播

1.事件传播的顺序

  •   冒泡 div>body>html>document>window (IE5.5之前没有html)
  •   捕获和冒泡相反

IE只支持冒泡,非IE都支持。注册事件时,addEventListener第三个参数false时表示冒泡传播,true时捕获。element.onclick注册的和上面jQuery注册的都是冒泡传播。但并不是所有事件都支持和冒泡,如blur,focus,load,unload都不支持冒泡。

2.阻止事件传播

  • JavaScript方式
function stopEvent(evnt) {
     if(evnt.stopPropagation) {
           evnt.stopPropagation();
     }   else {
           evnt.cancleBubble = true;  
     }
}
  • jQuery方式
 $(obj).bind(‘click‘,function(event){   //绑定事件
        //todo
        event.stopPropagation();   //阻止事件传播
 }); 

jQuery还有一个preventDefault方法,这个方法阻止了默认操作,如提交表单,打开连接,同时也阻止事件继续传播。

 

四、主动事件触发

  • element.click();
  • $(selector).trigger(event) 触发指定元素的某个事件

 

五、jQuery的其他几个事件

1.页加载触发ready()事件

ready:只要页面DOM结构加载后便触发,图片之类可以尚未加载完

onload:必须页面元素全部加载成功才触发,时间上晚于ready

$(document).ready(function(){}) 等价于$(function(){})

 

2.hover切换事件

$(selector).hover(in,out) 鼠标进入元素中触发in事件,移出元素触发out事件。

$(#div1).hover(
      function(){
           //鼠标进入元素做的事
      }, 
      function(){
           //鼠标移出元素做的事
      } 
);

 

3.toggle点击切换函数

$(selector).toggle() 无参数时,点击元素实现切换显示隐藏

$("div").toggle();

$(selector).toggle(fn1,fn2,fn3,...) 参数是多于1个是函数,点击元素实现函数轮流调用,调用完最后函数后再调用首个函数。

 $("div").toggle(
      function(){alert(1);},
      function(){alert(2);},
      function(){alert(3);}
 );

 

以上是关于JavaScript和jQuery的事件的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

在jQuery和JavaScript中,实现转跳

高效Web开发的10个jQuery代码片段

代码片段使用复杂的 JavaScript 在 UIWebView 中插入 HTML?

jQuery——事件和AJAX

高效Web开发的10个jQuery代码片段