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. extJS4.2.0 tabPanel学习（三）

    了解添加tab的函数 这里设置为自动添加,菜单是从后台获取的数据,前台进行双击的时候,添加tab页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  3. ubuntu 开启 ftp 服务 | mingming-killer

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. Hadoop MapReduce开发最佳实践（上篇）

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. md5sum校验文件完整性

    1.简介 MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改. MD5 全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生 ...

  6. [Unity Shader] 3D模型的简单属性

    每个3D对象是由顶点和面的.这被称为一个网格(Mesh).每个顶点有一个归一化的“normal”的向量,表示连接到该顶点的面的方向.这对于计算光照来说很重要.当计算漫反射和镜面反射的照明,normal ...

  7. STM32 USB虚拟串口(转)

    源:STM32 USB虚拟串口 串口调试在项目中被使用越来越多,串口资源的紧缺也变的尤为突出.很多本本人群,更是深有体会,不准备一个USB转串口工具就没办法进行开发.本章节来简单概述STM32低端芯片 ...

  8. 获取手机wifi下的网络地址

    #import "getIPhoneIP.h" #import <ifaddrs.h> #import <arpa/inet.h> @implementat ...

  9. mvn

    http://blog.csdn.net/z69183787/article/category/2265961

  10. Android studio中添加外部的jar包

    1.下载相关的jar包, 2,将jar包复制到当前module的lib中 3.选择新添加的jar包.右键.add as library 就好啦