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事件绑定、解绑、命名空间的更多相关文章

  1. jQuery事件之解绑事件

    语法: $(selector).unbind([eventType][,handler(eventObject)]); 返回值:jQuery 参数解释: eventTypey:类型:String以后包 ...

  2. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  3. 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 前端 -----jQuery的事件绑定和解绑

    11-jQuery的事件绑定和解绑   1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...

  5. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  7. python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  8. jQuery事件绑定与切换

    一.事件绑定 1.标准方式 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit(); ...

  9. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

随机推荐

  1. 跨域访问解决方案：JSONP

    关于什么是跨域请求,可以参见我之前的博文:http://www.cnblogs.com/LiuChunfu/p/5240145.html 上述博文最后有提到解决方案,一直说补充,但是工作忙忘了,直到朋 ...

  2. 疯狂JAVA讲义---第十二章：Swing编程（五）进度条和滑动条

    http://blog.csdn.net/terryzero/article/details/3797782 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条 标签: swing编程 ...

  3. 计算机学院大学生程序设计竞赛（2015’12） 1006 01 Matrix

    #include<stdio.h> #include<string.h> #include<iostream> #include<algorithm> ...

  4. Vmware克隆虚拟机后网卡eth0变eth1解决

    在克隆虚拟机的过程中,发现新克隆的机器的网卡由eth0变成了eth1,然而并没有eth1的配置文件. 1.#ip a 查看当前ip地址,发现是eth1网卡 2.#ll /etc/sysconfig/n ...

  5. BigDecimal 高精度计算 熟悉扩展，java除法保留小数问题

    java保留两位小数问题: 方式一: 四舍五入  double   f   =   111231.5585;  BigDecimal   b   =   new   BigDecimal(f);  d ...

  6. 转 java.lang.ClassNotFoundException: org.apache.commons.lang.exception.NestableRuntimeException

    转自:http://blog.csdn.net/zb0567/article/details/7893063 java.lang.ClassNotFoundException: org.apache. ...

  7. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  8. 在阿里云ECS（CentOS6.5）上安装ftp

    安装vsftpd 命令: yum install vsftpd –y 结果: 创建ftp存取文件的目录,用户名,密码 命令: useradd -d /home/ftp -g ftp -s /sbin/ ...

  9. LPC1788定时器使用

    #ifndef __TIM_H_ #define __TIM_H_ #include "common.h" extern u8 tim1_mr0_flag; void tim0_c ...

  10. bzoj3110: [Zjoi2013]K大数查询 【cdq分治&树套树】

    模板题,折腾了许久. cqd分治整体二分,感觉像是把询问分到答案上. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = ...