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. JAVA基础-多态

    多态 polymophism: 动态绑定, 迟绑定, 指在执行期间(java), 而不是编译期间(javac), 判断所引用对象的实际类型, 根据实际类型调用响应的方法. 3个条件: 1. 继承 2. ...

  2. 《JavaScript语言精髓与编程实践》读书笔记

    JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...

  3. CodeForces 609A USB Flash Drives

    水题 #include<cstdio> #include<cmath> #include<algorithm> using namespace std; +; in ...

  4. phpcms 细节

    Phpcms V9采用if语句判断当前栏目高亮.判断分类信息是否过期 10月05, 2013 by SJY 在用PC V9建站的时候,很多朋友会想到Phpcms V9判定当前栏目,让当前栏目高亮的功能 ...

  5. ruby, gem install 出现网络错误

    gem sources #查看目前的源 gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.or ...

  6. Struts2的整体回顾(Action, 拦截器, 值栈, OGNL表示式, ModelDriven)

    ValueStack里有map(request, session, attr, parameters)和对象栈. Map调用的方法: ActionContext.getContext().put(k, ...

  7. 基于Apache搭建Nagios图形监控

    基于apache 的稍微简单一点么?实验一下子就OK了... 环境: System: [root@losnau etc]# cat /etc/issueRed Hat Enterprise Linux ...

  8. 将UTF8编码转化为中文 － NSString方法

    方法一: 代码如下,如有更好的方法 麻烦贴出来,这个方法是通过webview进行解码的 UIWebView *web = [[UIWebView alloc] init]; NSString *tsw ...

  9. codeforces #309 DIV2

    这场并没有做,做的赛后的,太晚了时间,中午做了两题,稍微贴一下,剩余的题目本周争取补完 A题: 链接:http://codeforces.com/contest/554/problem/A #incl ...

  10. iOS第三方常用类库

    1.AFNetworking AFNetworking 采用 NSURLConnection + NSOperation, 主要方便与服务端 API 进行数据交换, 操作简单, 功能强大, 现在许多人 ...