标签：
一、引子
给html的元素添加一个响应事件，最简单的办法是直接在元素标签内填写事件属性，先看一个最简单的例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>测试</title> <script src="jquery.min.js"></script> <script> function test(){ alert("hello"); } </script> </head> <body> <div> <button onclick="test()">点击我</button> </div> </body> </html>
直接在元素标签中设置，这种方式最简单、直接，对于简单的应用问题不大。但也存在很多不好的地方，如让html标签比较臃肿，无法动态设置元素的事件。
而利用jquery来处理则会方面很多。
二、页面加载后的load事件
利用jquery可以给页面添加事件，当页面框架下载完毕后就会自动被执行。 在很多的页面应用中都会用到这个功能，可以在该事件中做很多初始化的动作，也可以利用ajax向服务器获取初始数据等。具体例子如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>测试</title> <script src="jquery.min.js"></script> </head> <body> <div> <button onclick="test()">点击我</button> </div> </body> <script> $(function(){ alert("i am first after load"); }); $(function(){ alert("i am second after load"); }); </script> </html>
在浏览器中打开该页面后，就会先后弹出两个alert框。 加载事件代码编写非常简单。就是调用jquery的 $()函数，参数是一个js函数。
而且可以设置多个，按照编写的先后顺序被执行，如上面代码。
三、利用jquery给元素设置事件响应
通过jquery设置事件，是通过编写相应的代码来完成，举例说明：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>测试</title> <script src="jquery.min.js"></script> </head> <body> <div> <button id="btn">点击我</button> </div> </body> <script> $(function(){ $("#btn").click(function(){ alert("hello"); }); }); </script> </html>
jquery对象有很多事件方法，给元素设置事件，先获取该元素对应的jquery对象（如上面的代码$("#btn")），然后调用相应的方法，如上面的click方法，参数就是一个函数。当元素事件被触发时，该函数就会被执行。
三、事件冒泡概念
html的事件机制有个冒泡机制，也就是说事件会从最先被触发的元素逐步向包含它的父元素传递。除非中间被取消。
还是举例说明
标签：
原文地址：http://www.cnblogs.com/51kata/p/5123518.html
