jQuery事件绑定、解绑、命名空间
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: pink;
}
.s2{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body style="margin:1px;">
<div id="div001">div001</div>
<div id='div002'>div002</div>
<div id='div003'>div003</div>
<div>
<button id="btn001">click me to unbind div mouse event </button>
<button id="btn002">click me to unbind div001Click02 </button>
<button id="btn003">click me to bind div002 events </button>
<button id="btn004">click me to trigger div002 events </button>
<button id="btn005">click me to unbind div002 events </button>
<button id="btn006">click me to bind div003 events </button>
<button id="btn007">click me to trigger div003 events </button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index041.js"></script>
</body>
</html>
$(function() {
$('div').bind('mouseover mouseout', function() {
// $(this).toggleClass('s1');
});
$('#btn001').click(btn001Click);
$('#div001').bind('click', div001Click01);
$('#div001').bind('click', div001Click02);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
$('#btn007').click(btn007Click);
});
function btn001Click(e) {
// $('div').unbind('mouseover');
// 可以这样进行解除绑定；
$('div').unbind('mouseover mouseout');
}
function div001Click01(e) {
console.log('div001Click01');
}
function div001Click02(e) {
console.log('div001Click02');
}
function btn002Click(e) {
// 可以这样解除绑定两个事件中的一个事件；
$('#div001').unbind('click', div001Click02);
}
function btn003Click(e) {
// 这样绑定之后，直接点击div002也会触发事件；
$('#div002').bind('click.plugin', function() {
console.log('div002 click.plugin');
});
// 这样绑定之后，直接双击div002也会触发事件；
$('#div002').bind('dblclick.plugin', function() {
console.log('div002 dblclick.plugin');
});
// 这样绑定之后，鼠标直接移动也会触发事件；
$('#div002').bind('mouseover.plugin', function() {
console.log('div002 mouseover.plugin');
});
}
function btn004Click(e) {
// 这样触发不会触发任何事件；
$('#div002').trigger('.plugin');
// 这样可以触发click.plugin事件；
$('#div002').trigger('click.plugin');
// 这样也可以触发click事件；
$('#div002').trigger('click');
}
function btn005Click(e) {
// 这样可以解除所有.plugin事件绑定；
$('#div002').unbind('.plugin');
}
function btn006Click(e) {
$('#div003').bind('click',function(){
console.log("div003 click");
});
$('#div003').bind('click.plugin',function(){
console.log("div003 click.plugin");
});
}
function btn007Click(e) {
// 这样可以触发所有的click事件；
$('#div003').trigger('click');
// 这样竟然已经不能触发事件了；
$('#div003').trigger('click!');
}