您的位置：首页 > Web前端 > JQuery

jQuery中的事件

2016-07-18 15:04 609 查看

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());
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航