jQuery【事件】问题

zccst

浏览: 3322510 次
性别:
来自: 北京

最近访客更多访客>>

consy

snowstorm

净瞎扯

离氺的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端-使用jQuery

jquery

作者：zccst
2，jquery文本改变事件绑定
介绍：change：焦点离开时触发事件
      focus：获得焦点时触发事件
      keyup：按键弹起时触发事件
      keypress：按键按下时触发事件（先响应事件，再显示输入结果（获得的是上一次结果），可能被输入法拦截）
      propertychange：属性改变时触发事件（不管是获得焦点还是value改变等）

<html>  
<head>  
<title>Jquery操作DOM对象</title>  
<script type="text/javascript" src="D:/jquery study/jquery_js/jquery-1.6.4.js"></script>  
<script type="text/javascript">  
    $(function(){  
    $(".txt").bind("propertychange",function(){  
        var txtChange = $("input").val();  
        $("#p2").html(txtChange);  
    });  
    })  
</script>  
</head>  
<body>  
    <input type="text" name="test" class="txt" value="test"/>  
    <p id="p2"></p>  
</body>  
</html>

$(".txt").change(function(){  
        $(".txt").val("");  
    });  
    $(".txt").focus(function(){  
        $(".txt").val("");  
    });  
    $(".txt").keyup(function(){  
        var txtChange = $("input").val();  
        $("#p2").html(txtChange);  
    });  
    $(".txt").keypress(function(){  
        var txtChange = $("input").val();  
        $("#p2").html(txtChange);  
    });  
    $(".txt").bind("propertychange",function(){  
        var txtChange = $("input").val();  
        $("#p2").html(txtChange);  
    });

1，live 和 delegate 一样吗？
例如以下代码片段

$('a').live('click', function() { blah() });
// or
$(document).delegate('a', 'click', function() { blah() });

两种方法得到的最终结果没有区别，但是执行的过程却不一样。前者是先扫描页面上所有 'a' 元素，然后绑定事件到 document 节点，最后根据事件类型及事件源作判断；后者是直接扫描 document 节点，然后绑定事件到 document 上，最后判断。前者扫描的是 'a'，后者扫描的就是 document 本身，理论上后者更快一些。

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

$("#test").children("a").live("mouseover", function() {
    alert("hello");
});

上边这种写法并不会输出，我们使用delegate()可以写为：

$("#test").delegate("a", "mouseover", function() {
    alert("hello");
});

这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法，其中并没有做非常详细的解释，仅望能对大家在具体使用时有所帮助。

分享到：

前端开发的几个阶段 | linux的home隐藏文件设置

2013-05-17 15:12
浏览 1357
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论