JavaScript和jQuery的事件-优快云博客

本文详细介绍了JavaScript中事件监听的基本概念与方法，包括内联模式、传统模式、DOMLevel2事件模型以及jQuery的事件处理函数。同时，阐述了事件传播的顺序、阻止事件传播的方式，并介绍了jQuery的ready、hover、toggle等其他事件方法。此外，文章还讨论了主动事件触发、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);}
 );

转载于:https://www.cnblogs.com/feitan/p/5294920.html