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. javascript学习01

    1/js 中所有的数字都是浮点型,所以5/2=2.5    6.5%2.1=0.2 2/delete用于删除对象的属性或者是数组元素: var o={x=1,y=2}:delete o.x;  x i ...

  2. SystemUI简介

    http://wenku.baidu.com/link?url=p9hBaL4tmc6Z6fAxar23459qPEv3EqDBCW71SmdrphTA0vU02ZWVayNkEItvkP1WSk4L ...

  3. Bridge 设计模式

    原文:http://www.linkedkeeper.com/detail/blog.action?bid=26 You are here:  架构&实践 - 设计模式 Frank     2 ...

  4. ural1650 Billionaires

    Billionaires Time limit: 3.0 secondMemory limit: 64 MB You probably are aware that Moscow holds the ...

  5. MYSQL同步--主从同步问题集锦

    1  同步停止,报错误:  Could not find first log file name in binary log index file 数据库主从出错: Slave_IO_Running: ...

  6. linux日常巡检脚本

    ######################以下是脚本内容开始部分###################################### #!/bin/bash #set -x2012-02-2 ...

  7. ubuntu下如何安装和卸载wine-qq

    1.安装wine 按ctrl+alter+T打开终端输入以下两条命令 sudo apt-get update sudo apt-get install wine 安装时间有点长,请耐心的等候 2.按钮 ...

  8. 网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  9. Golang测试技术

    本篇文章内容来源于Golang核心开发组成员Andrew Gerrand在Google I/O 2014的一次主题分享“Testing Techniques”,即介绍使用Golang开发 时会使用到的 ...

  10. iOS开发——pch文件创建

    新换的公司,接手的项目里面连pch文件都没有,每次需要用到屏幕的宽高时,都是现写.今天既然碰到了,就把PCH这个玩意说一下. 1.Command+N,打开新建文件窗口:iOS->Other-&g ...