文档章节

jquery-event02

zhchl2010
 zhchl2010
发布于 2015/01/05 22:43
字数 949
阅读 4
收藏 0
<script type="text/javascript">
$(function(){
    //one事件仅仅只会执行一次
    $("*").one("click",function(event){
        print(event.currentTarget.id+"--->"+event.target.id);
    });    
    
    
    function print(txt){
        $("#content").append(txt+"<br>");
    }
});
</script>
////////////////////////////////
<script type="text/javascript">
$(function(){
    //one事件仅仅只会执行一次
    $("*").bind("click",function(event,a,b){
        print(event.currentTarget.id+"--->"+event.target.id+":"+(a+b));
    });    
    /*使用trigger带来的好处有两个:
        1.可以在其他的对象中调用另外一个事件
        2.可以为事件传递参数
        使用trigger依然存在事件冒泡*/
    $("a[href='cccc']").bind("click",function(event){
        $("#child").trigger("click",[2,3]);
        event.preventDefault();
    });
    function print(txt){
        $("#content").append(txt+"<br>");
    }
});
</script>
///////////////////////////////////////
<script type="text/javascript">
$(function(){
    //one事件仅仅只会执行一次
    $("*:not(a[href='cccc'])").bind("click",function(event,a,b){
        //alert(event.isDefaultPrevented());
        print(event.currentTarget.id+"--->"+event.target.id+":"+(a+b));
    });    
    /*使用triggerHandler带来的好处有两个:可以让调用的事件不冒泡不提交
    带来的好处就是:写事件我们完全按照最正常的方式写,不用考虑事件传递
    在特殊的使用通过triggerHandler来调用就会阻止事件传递 */
    $("a[href='cccc']").bind("click",function(event){
        $("#child").triggerHandler("click",[2,3]);
        event.preventDefault();
    });
    
    /*jquery中的其他很多事件都可以直接通过名称来完成调用,如下:*/
    $("#child").mouseover("click",function(event){
        $(this).css("color","#f00");
    });
    function print(txt){
        $("#content").append(txt+"<br>");
    }
});
</script>
///////////////////////////////////////
<script type="text/javascript">
$(function(){
    /*可以通过空格绑定多个事件*/
    $("#child").bind("mouseover.test mouseout.test",function(event){
        $(this).toggleClass("bgc");
    });
    
    //取消mouseout事件
    //$("#child").unbind("mouseout");
    /*可以为一组事件增加一个命名空间,在事件之后通过.来增加,
    在移除事件的时候,可以直接通过命名空间一起移除"*/
    $("a[href='cccc']").bind("click.test",function(event){
        print("a");
        event.preventDefault();
    });
    $("*").unbind(".test");
    function print(txt){
        $("#content").append(txt+"<br>");
    }
});
</script>
//////////////////////////////////////////
<script type="text/javascript">
$(function(){
    /*基于bind所带来的问题是:当新增加元素的时候,没有办法为新元素绑定事件
    需要重新使用bind来绑定事件*/
    $(".ccc").bind("click",function(event){
        alert($(this).html());
    });
    
    $("#content").append("<div class='ccc'>bbbbbbb</div>");
});
</script>
///////////////////////////////////////////
<script type="text/javascript">
$(function(){
    /*使用了live事件之后就有效解决了新元素无法绑定事件的问题
    live事件存在的原理是通过事件委托的方式,
    事件委托时通过冒泡机制实现的
    jquery1.9以上废除了live()改为on()*/
    $(".ccc").on("click",function(event){
        alert($(this).html());
    });
    
    $("#content").append("<div class='ccc'>bbbbbbb</div>");
});
</script>
///////////////////////////////////////////////
<script type="text/javascript">
$(function(){
    /*使用了live事件之后就有效解决了新元素无法绑定事件的问题
    live事件存在的原理是通过事件委托的方式,
    事件委托时通过冒泡机制实现的
    jquery1.9以上废除了live()改为on()
    第二个参数可以指定相应的上下文,说明事件委派的根对象时什么
    但是以下写法很难看,所以jquery在1.3之后提供delegate的方法替代*/
    $(".ccc","#content").on("click",function(event){
        alert($(this).html());
    });
    
    $("#content").append("<div class='ccc'>bbbbbbb</div>");
    $("#abc").append("<div class='ccc'>bbbbbbb</div>");
});
</script>

/////////////////////////////////////////////////
<script type="text/javascript">
$(function(){
    /*closest就是向上找,如果满足就返回,如果不满足,就继续向上找*/
    //$("#l1").closest("ul").css("color","#ff0");
    /*由于closest可以从自己找,所以closest非常适合做事件委派*/
    $("#l1").closest("li").css("color","#ff0");
    /*事务委托的原理:此时每一个事件只要被点击到,他都会冒泡到document去,
    所以以下事件会被处理,在处理时,判断一下该事件是否是我要处理的对象就可以解决了
    */
    //$(document).bind("click",function(event){
        $("#content").bind("click",function(event){
        //alert($(this).html());
        var obj=$(event.target).closest(".ccc");
        if(obj[0]==event.target){
            alert("abc");
        }
    });
    
    /*对于live而言就是使用事件委派的方式,但是使用这个方式会带来如下问题
    1.每个事件都会冒泡到document上面去,内存开销变大
    2.使用live不支持一些特殊的事件 
    对于live而言,它提供了第二个参数来说明绑定的上下文 */
    $("#content").append("<div class='ccc'>bbbbbbb</div>");
    $("#abc").append("<div class='ccc'>bbbbbbb</div>");
});
</script>


© 著作权归作者所有

上一篇: jquery-event03
下一篇: jquery-event01
zhchl2010
粉丝 3
博文 80
码字总数 77710
作品 0
成都
程序员
私信 提问
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
172
0
240多个jQuery插件(2)

表格等(Tables, Grids etc.) UI/Tablesorter. jQuery ingrid. jQuery Grid Plugin. Table Filter - awesome!. TableEditor. jQuery Tree Tables. Expandable “Detail” Table Rows. Sortab......

五味格子
2011/05/11
309
0
41个很棒的jQuery教程

这里是很棒的jQuery教程的一个大集合,并包括步骤说明。 41个jQuery教程列表如下: 1. JQuery for Absolute Beginners: The Complete Series 2.An Intensive Exploration Of jQuery 3.10 Th...

小卒过河
2011/07/23
4.3K
7
js:滚动页面时自动激活对应菜单中的条目

这个在Change Active Menu Item on Page Scroll?有详细的讨论。对应的代码在http://jsfiddle.net/mekwall/up4nu/。 下面是代码,我做了些小的改动。 效果如下: firebug控制台输出如下: jq...

樂天
2015/11/20
101
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
67
0

没有更多内容

加载失败,请刷新页面

加载更多

【0918】正则介绍_grep

【0918】正则介绍_grep 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 一、正则介绍 正则是一串有规律的字符串,它使用单个字符串来描述或匹配一系列符合某个语法规则的字符串。 二、grep工具 ...

飞翔的竹蜻蜓
33分钟前
4
0
为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
今天
8
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
今天
4
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
今天
5
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部