Dom中可以绑定事件，但是比较繁琐，比如onclick，每行都要绑定一个。
在jQuery中可以使用选择器，来绑定事件,这样就不需要每行都绑定一个事件了。
1、click事件
如下实例，最基本的click事件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script src="jquery-2.2.4.min.js"></script>
<script>
$('li').click(function(){
var temp = $(this).text();
alert(temp);
});
</script>
</body>
</html>
2、$(document).ready(function(){...})用法:
该方法表示当前文档树准备好之后，执行function()。例如，一个页面结构加载完成，但是请求的图片还未加载完时，可以先执行function()中的功能。他还有另外一种写法:$(function(){...})，功能一样。
如此这般，页面中的js代码就可以写在该function()中了，例如上例：
<script> $(document).ready(function(){ $('li').click(function(){ alert($(this).text()); }); }); </script>
3、事件委托：
上面实例中，当页面刷新时，就会绑定事件。现在，在页面不刷新的情况下，新添加一个<li>8</li>标签。然后再点击8，并不会弹出内容8。
若此时让第8个<li>标签也出发事件，就要用到事件委托geledate():
.geledate ()事件委托，这种事件的触发方式是，当鼠标点击该标签时，才绑定该事件，并执行该事件。即用的时候(点击的时候)才会绑定、执行事件。默认不会把所有的<li>标签都绑定事件，这样相对于上面的触发方式，比较高效。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="添加" onclick="addli()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script src="jquery-2.2.4.min.js"></script>
<script>
function addli(){
$('ul').append('<li>8</li>');
}
$('ul').delegate('li','click',function(){
alert($(this).text());
})
</script>
</body>
</html>
4、.bind()事件:
.bind()事件与.click()一样,都是直接绑定事件。
$('li').bind('click',function(){
alert($(this).text());
})