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. asp Vernum

    使用ASP加密算法加密你的数据(一) 简介    首先简单介绍一下有关加密的背景.由于美国禁止几种密码算法的对外出口的加密位数(例如SSL的40位加密限制),本文将介绍一种ASP可以使用的简单字符加密 ...

  2. Linux批量部署工具Expect

    既然没有遇到过,做好准备总是好的.这是自己送给自己的话,现在运维做自动话越来越多,自己就学以下,记录笔记.目前主流的有puppet.Expect.pssh等等,今天就用Expect做自动部署和日常管理 ...

  3. svn branch 的使用

    svn revision graph 中选中 "wc"(Mark current revision of your working copy.)这个选项后, 当前工作副本的版本号会 ...

  4. iOS之NSPredicate（正则表达式和UIBarController）

    本文转发至:https://segmentfault.com/a/1190000000623005 NSPredicate,这个类和我上一篇博文中提到的valueForKeyPath一样很强大.它的使 ...

  5. Inside dependency property

    依赖属性的定义,分为3步(以PresentationFramework中的System.Windows.Controls.Button为例) 1.  声明依赖属性 public static read ...

  6. CodeForces 652B z-sort

    先对序列排个序. 例如:1 2 3 4 5 6 7 我们把序列分成两半,前一半是1 2 3 4,后一半是5 6 7 然后,我们从前一半取最小的一个,再从后一半取最小的一个..一直操作下去就能构造出答案 ...

  7. PHP访问接口获取数据

    如:http://localhost/operate.php?act=get_user_list&type=json 在这里operate.php相当于一个接口,其中get_user_list ...

  8. 解决KVM中鼠标不同步问题

    VNCViewer中的鼠标走得总是比本地系统中的鼠标要慢,不同步,往往实体机中的鼠标都移出vnc窗口外边了,虚拟机中的鼠标指针还没移到需要点击的位置,操作起来很不方便. 起初的想法也是配置的问题,就按 ...

  9. 2.4 easyui - panel的使用

    <div id="p" class="easyui-panel" title="My Panel"             style ...

  10. Redis的启动

    http://www.cnblogs.com/goodspeed/archive/2012/10/18/2729615.html http://blog.csdn.net/yulei_qq/artic ...