关于在jquery中设置事件侦听器的基本问题

我来自as3，对jQuery有点迷茫。 我觉得我还没有掌握事件如何与jQuery或javascript一起工作的概念。我正在尝试这样做：

animation 1 ends --> load image --> animation 2 starts

现在，我正在通过.animate（）中的complete:function（）{}参数执行此操作。它可以工作，但不是很灵活

如何设置这样的场景

*

*

我尝试使用.bind（）和.live（），类似$（窗口文档div等）.bind（'load'，'animation storagein a variable'等），但没有结果。 有什么建议吗

提前谢谢

---

首先，谢谢大家的帮助

很抱歉使用了“回答你的问题”功能，我一直无法使用“添加评论”链接，毕竟，我发现向每个人粘贴相同的答案有点愚蠢。如果有任何类型的版主，请把它移到任何应该移动的地方

请原谅我缺乏恰当的技术语言。这种“回调函数”方法是我一开始使用的方法，它工作得很好，但生成的代码不太可重用

我想知道如何通过封装写出更尊重的东西，比如：

Image A is loaded, event is dispatched "IMAGE LOADED"

Totally unrelated Object B has a listener for the "IMAGE LOADED" event, so receives  the event and processes it through its method bDoesThis().


Totally unrelated Object C has a listener for the "IMAGE LOADED" event, so receives the event and processes it through its method cDoesThat().

// select what you want to animate, and do some animation
// set a callback function to execute upon completion
$('div').animate({width:100},2000,function(){
    // in the callback - create a new IMG element
    $('div').html('<img id="newImage" src="http://farm7.static.flickr.com/6085/6027474363_42050547b2_b.jpg" />')
    // set an event listener for your IMG element
    $('#newImage').load(function(){
        // do second animation
        $('div').animate({width:800},2000)
    })
})

---

再次感谢

我想你指的是

---

---

我想你指的是

---

---

您可以将事件绑定到使用$（选择器）格式获得的对象，例如$（文档）或$（“#yourlementId”），并使用

bind

或

live

添加事件句柄。Live的优点是，任何与选择器匹配的新创建元素都会使用事件处理程序自动绑定。比如说,

 $('.clickme').bind('click', function()
    {//event handler.
      $(".block:first").animate({"left": "+=50px"}, "slow" , "swing", function(){
        //animation 1 ends.do whatever in callback
      });
    };

---

您也可以使用

$（'.clickme'）。单击（function（）{}）作为快捷方式，而不是繁琐的
$（'.clickme'）.bind（'click'，function（）{}）
语法
 将事件绑定到使用$（选择器）格式获取的对象，例如$（document）或$（“#yourlementId”），并使用
bind
或
live
添加事件句柄sr。Live的优点是，任何与选择器匹配的新创建元素都会使用事件处理程序自动绑定。比如说,

 $('.clickme').bind('click', function()
    {//event handler.
      $(".block:first").animate({"left": "+=50px"}, "slow" , "swing", function(){
        //animation 1 ends.do whatever in callback
      });
    };

您也可以使用
$（'.clickme'）。单击（function（）{}）作为快捷方式，而不是繁琐的
$（'.clickme'）.bind（'click'，function（）{}）
语法
 您将使用回调函数和事件侦听器处理图像，如下所示：

Image A is loaded, event is dispatched "IMAGE LOADED"

Totally unrelated Object B has a listener for the "IMAGE LOADED" event, so receives  the event and processes it through its method bDoesThis().


Totally unrelated Object C has a listener for the "IMAGE LOADED" event, so receives the event and processes it through its method cDoesThat().

// select what you want to animate, and do some animation
// set a callback function to execute upon completion
$('div').animate({width:100},2000,function(){
    // in the callback - create a new IMG element
    $('div').html('<img id="newImage" src="http://farm7.static.flickr.com/6085/6027474363_42050547b2_b.jpg" />')
    // set an event listener for your IMG element
    $('#newImage').load(function(){
        // do second animation
        $('div').animate({width:800},2000)
    })
})

//选择要设置动画的内容，然后执行一些动画
//将回调函数设置为在完成时执行
$（'div'）.animate（{width:100}，2000，function（）{
//在回调中-创建一个新的IMG元素
$（'div'）.html（“”）
//为IMG元素设置事件侦听器
$（'#newImage'）.load（函数（）{
//做第二个动画
$（'div'）.animate（{width:800}，2000）
})
})

您可以在此处看到此代码的演示：
您将使用回调函数，并为图像设置一个事件侦听器，如下所示：

Image A is loaded, event is dispatched "IMAGE LOADED"

Totally unrelated Object B has a listener for the "IMAGE LOADED" event, so receives  the event and processes it through its method bDoesThis().


Totally unrelated Object C has a listener for the "IMAGE LOADED" event, so receives the event and processes it through its method cDoesThat().

// select what you want to animate, and do some animation
// set a callback function to execute upon completion
$('div').animate({width:100},2000,function(){
    // in the callback - create a new IMG element
    $('div').html('<img id="newImage" src="http://farm7.static.flickr.com/6085/6027474363_42050547b2_b.jpg" />')
    // set an event listener for your IMG element
    $('#newImage').load(function(){
        // do second animation
        $('div').animate({width:800},2000)
    })
})

//选择要设置动画的内容，然后执行一些动画
//将回调函数设置为在完成时执行
$（'div'）.animate（{width:100}，2000，function（）{
//在回调中-创建一个新的IMG元素
$（'div'）.html（“”）
//为IMG元素设置事件侦听器
$（'#newImage'）.load（函数（）{
//做第二个动画
$（'div'）.animate（{width:800}，2000）
})
})

您可以在此处看到此代码的演示：
请更改问题的标题以反映问题，而不是回答问题的难易程度。事实上，我不知道回答问题是容易还是困难。它是关于设置和调度事件的，我认为这是任何语言的基本功能，所以是的，它是关于基本功能的。如果我对如何在标题中反映这一点有了更好的想法，我会相应地修改它；我不知道如何回答大家，并删除了以“抱歉”开头的消息，因为使用了此“回答您的问题”功能。抱歉打扰了，请更改您的问题标题以反映问题，而不是回答问题的难易程度。嗯，实际上我不知道回答问题是容易还是困难。它是关于设置和调度事件的，我认为这是任何语言的基本功能，所以是的，它是关于基本功能的。如果我对如何在标题中反映这一点有了更好的想法，我会相应地修改它；我不知道如何回答大家，并删除了以“抱歉”开头的消息，因为使用了此“回答您的问题”功能。对不起打扰了