zoukankan      html  css  js  c++  java
  • click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法

    1.click()单击事件方法:

    $("a").click(function() {
    
       alert("hello");
    
    });
    

    2.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。

    var message = "left";
    
    $("a").bind("click", function() {
    
       alert(message);
    
       return false;
    
    });
    
    var message = "left";
    $("a").bind("click", { msg: message }, function(e) {
       alert(e.data.msg);
       return false;
    });
    
    var message = "right";
    $("a").bind("contextmenu", { msg: message }, function(e) {
       alert(e.data.msg);
       return false;
    });
    

     bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

        .bind(eventType[, evnetData], Handler(eventObject))

    其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事 件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函 数,eventObject表示事件对象。

    .bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventType事件上,如果需要,还可以向事件处理程序传递数据。

    3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

        如果元素是在调用bind()之后添加的,则不能够执行相应的事件。而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:

    $("div.live").live("click", function() {
    
       alert("success");
    
    });
    

    这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。

    live()方法的一个不足在于它不支持链式写法:

    $("#test").children("a").live("mouseover", function() {
        alert("hello");
    });
    
    上边这种写法并不会输出
    

    使用delegate()可以写为:

    $("#test").delegate("a", "mouseover", function() {
    
        alert("hello");
    
    });
    
    $('body').delegate('a:not([target="_blank"])', 'click', function (e) {
             if ($(this).attr('href') == location.hash) {
                        $(window).trigger('hashchange');
              }
     });
    

    停止事件传播

    $('a').bind('click',function(e){
          e.preventDefault()
          e.stopPropagation()}
    ) 
    
    if (e.stopPropagation) {
         e.stopPropagation();
    }
    
    e.cancelBubble = true;   
    

     e是事件触发后传进来的一堆参数,表示事件对象

  • 相关阅读:
    Linux下常用的3种软件安装方式
    解决navicate 连接mysql数据库中文乱码的问题
    Lua 遍历Linux目录下的文件夹
    ubuntu 更改源
    ubuntu 下安装配置LAMP
    简述configure、pkg-config、pkg_config_path三者的关系
    linux 下库的深入调研
    Linux下的库操作工具-nm、ar、ldd、ldconfig和ld.so
    linux命令strings
    c++隐式类型转换和explicit
  • 原文地址:https://www.cnblogs.com/zhuiluoyu/p/4721207.html
Copyright © 2011-2022 走看看