jquery-事件
一：jquery事件绑定有4种 方法
方法1：直接绑定事件，如
$('.c1').click()
$('.c1').....方法2：通过bind方法
bind(“事件名”，“方法”) 绑定事件
unbind(“事件名”，“方法”) 去除绑定事件
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})方法3：通过on方法
on(“事件名”，“方法”) 绑定事件
off(“事件名”，“方法”) 去除绑定事件
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})方法4：delegate方法
delegate("标签",“事件名”，“方法”) 绑定事件
undelegate(“标签”，“事件名”，“方法”) 去除绑定事件
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})上面3种方法都差不多，但是对于增加内容，比如表格数据后面跟有操作，比如编辑等。
原的表格在编译的时候已绑定了事件，但是新增加的表格数据，并没有绑定事件，用上面的方法都不行，
可以使用delegate，指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
，使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" />
<input type="button" value="添加" />
<ul >
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
</script>
</body>
</html>二：事件列表
事件切换
事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- error([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
三：阻止默认事件发生
1）标签a等默认有跳转事件。如果给a标签在绑定个事件，谁会先执行？
是绑定的事件先执行，默认的后执行。
2）如何阻止默认事件执行？
在给绑定的事件前加return ；如果return返回的是true继续执行默认事件，如果是false则不执行。如下例子
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a>
<a href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>- 上一篇 »jQuery 事件
- 下一篇 »Jquery基础之事件操作