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!'); }