Question

如何在jquery中创建自定义事件？我想创建一个选择绘制事件。这样我就可以用我的事件替换这个插件JQuery Image Annotation上的添加注释按钮。我希望能够像绘制矩形选区一样直接绘制注释，我该怎么做？请指导。

我已经在做了但我的问题是我不知道如何定义我想调用ondraw的自定义事件，我的意思是我想知道的是，如何定义一个基本的jquery事件？任何骨架或例子肯定会有所帮助，而且我是新手，所以我需要一些指导，我也发现了一段代码来创建矩形，代码：

     $(function(){
var $container = $('#container');
var $selection = $('<div>').addClass('selection-box');

$container.on('mousedown', function(e) {
    var click_y = e.pageY;
    var click_x = e.pageX;

    $selection.css({
      'top':    click_y,
      'left':   click_x,
      'width':  0,
      'height': 0
    });
    $selection.appendTo($container);
    $container.on('mousemove', function(e) {
        var move_x = e.pageX,
            move_y = e.pageY,
            width  = Math.abs(move_x - click_x),
            height = Math.abs(move_y - click_y);

        $selection.css({
            'width':  width,
            'height': height
        });
        if (move_x < click_x) { //mouse moving left instead of right
            $selection.css({
                'left': click_x - width
            });
        }
        if (move_y < click_y) { //mouse moving up instead of down
            $selection.css({
                'top': click_y - height
            });
        }
    }).on('mouseup', function(e) {
        $container.off('mousemove');
        $selection.remove();
    });
});

}）;

Answer 1

了解触发和绑定here。触发代码中的事件

// Trigger event on selection draw
$(document).trigger('onSelectionDraw')

然后绑定到事件

$(document).bind('onSelectionDraw', function() {
    // do stuff
});

Answer 2

我从未向我推荐在jQuery对象中创建自定义事件，这是创建自己的“事件”的合适方式。相反，我总是指向：

在我的脚本中使用特定断点调用的回调函数，使用我自己的代码模拟事件。
创建一些通用事件处理程序并使用jQuery .trigger()方法
如果事件已经存在，请使用您自己的事件处理程序取消绑定并重新绑定。

回调函数示例

function myCustomEvent(callback)
{
    // Do something

    // If callback is a function call it
    typeof callback === 'function' && callback();
}

很久以后，在远处的一个星系中

// You have a function that loads JS asyncronously
// but want to know each time it is fired. asyncLoad()
// Also accepts a callback as a parameter
asyncLoad('/js/myJs.js', function()
{
    console.log('myJs asyncronously loaded');

    // Script is loaded, run our event
    myCustomEvent(function()
    {
        console.log('myJs event complete');
    });
});

在该示例中，在asyncLoad（）函数中触发自定义事件更有意义，但为了显示它是如何工作的，我认为这样做。

您的代码：

在jQuery对象上调用插件时，事件绑定到该按钮。它很可能是一个“点击”，但值得查看源以查找实际事件。

从粗略的看来，取消绑定和重新绑定似乎是最好的动作，假设你也可以找到它创建的按钮的id。（或者有一种简单的方法可以选择它作为jQuery对象）。

$('#createdButton').unbind('click')
    .click(function(e)
    {
        // New event handling code
    });

注意，如果插件使用带有.on的冒泡事件，则此方法可能无效。在这种情况下，您需要stopPropagation()表示原始事件处理程序中的元素或父级。或者，事件绑定的低级DOM元素上的unbind()也可以工作。

如何在jquery中创建自定义事件？

2 个答案: