`
zccst
  • 浏览: 3319412 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。
分享到:
评论

相关推荐

    jquery-事件冒泡

    jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...

    jQuery事件和动画.ppt

    jQuery事件和动画.,对刚学习的同学帮助很大

    jquery鼠标滚轮事件

    在JavaScript的世界里,jQuery库为开发者提供了极大的便利,特别是在处理DOM操作和事件处理上。"jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    原生JavaScript监听滚轮事件稍微复杂一些,因为需要考虑浏览器兼容性问题。可以使用`addEventListener`方法添加事件监听器,并处理不同的滚轮事件名称。 ```javascript document.addEventListener('...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

    jQuery历史事件时间轴插件.rar|jQuery历史事件时间轴插件.rar

    jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件

    jQuery事件及绑定.pptx

    jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...

    为jQuery添加自定义事件机制

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为jQuery添加自定义事件机制,这将帮助开发者扩展jQuery的功能,实现更加个性化的...

    jQuery为动态生成的select元素添加事件的方法

    3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...

    jquery监听DIV的事件

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解...

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具.zip

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...

Global site tag (gtag.js) - Google Analytics