Question

我有一些代码添加了不是用jQuery编写的事件监听器。

pic1.addEventListener("webkitTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("oTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("transitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);

我现在想用jQuery添加eventListeners，并保持相同的功能。关于这应该是什么样子的想法？

这是我正在做的事情的草图...... http://jsdo.it/dbwest/4rqo

Answer 1

您应该能够在一个命令中绑定所有3个事件，如下所示。我还包括jQuery等同于设置类和zindex。

$(pic1).bind('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

或

$(pic1).on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

Answer 2

可以使用.on或.bind语句在jquery中替换

事件侦听器：

var pic1 = $('yourElementOrClass');

pic1.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).addClass('down').css('z-index', picclick);
});

Answer 3

我不确定你是否已经为这个问题做了足够的研究，但我会给你怀疑的好处。 jQuery有.on，这是绑定事件的推荐方法。对于这种情况，它也有一个快捷方式：

$(pic1).on("webkitTransitionEnd oTransitionEnd transitionEnd",
function(){
    pic1.className="down";
    pic1.style.zIndex=picclick;
});

将所有事件放在一个这样的事件意味着您可以避免重复代码。

重构以下代码以使用jQuery

3 个答案: