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的事件的主要内容，如果未能解决你的问题，请参考以下文章