jQuery事件绑定、解绑、命名空间
2015-11-17 09:03
671 查看
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!'); }
相关文章推荐
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
- JavaScript常用表单验证&收集的35个 jQuery 小技巧
- 三、jQuery事件处理
- jquery验证手机号是否正确实例讲解
- 今天抽时间给大家整理jquery和ajax的相关知识
- jquery表单验证需要做些什么
- jQuery实现文本框邮箱输入自动补全效果
- jquery实现邮箱自动填充提示功能
- jquery判断密码强度的验证代码
- Jquery ajax 同步阻塞引起的UI线程阻塞问题
- 谈谈对jquery ui tabs 的理解
- 基于jquery实现可定制的web在线富文本编辑器附源码下载
- 将JavaScript的jQuery库中表单转化为JSON对象的方法
- 基于Jquery easyui 选中特定的tab
- 实例代码讲解jquery easyui动态tab页
- 基于Jquery代码实现支持PC端手机端幻灯片代码
- jquery可定制的在线UEditor编辑器
- Jquery 垂直多级手风琴菜单附源码下载
- jquery获得option的值和对option进行操作
- 四、jQuery中的动画