如何在jquery中創建自定義事件？

如何創建jQuery的自定義事件？我想創建一個選擇繪製事件。以便我可以用我的活動替換此插件JQuery Image Annotation上的添加備註按鈕。我希望能夠像繪製矩形選區一樣直接繪製註釋，我該怎麼做？請指導。如何在jquery中創建自定義事件？

我已經這樣做了，但我的問題是我不知道如何定義我想要調用ondraw的自定義事件，我的意思是我想知道的是如何定義一個基本的jquery事件？任何骨架或例子definitly幫助和IM是新手，所以我需要一些指導，我也發現了一段代碼來創建矩形，代碼：

 $(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(); 
    }); 
});

}）;

來源

2012-11-03 irohit786

你可以檢查插件的源代碼，或者打開瀏覽器檢查器找到它的id和目標，你可以做很多事情，好像這個問題有點含糊...... _「我希望能夠直接繪製一個註釋就像我們繪製一個矩形選區一樣「_ - 聽起來很簡單，但它可能不是;我的建議：先試着做，然後回來，如果你有特定的問題。 – elclanrs

@elclanrs對不起，我想我不夠具體，是的，我做了它，我已經在上面添加了我的問題。 – irohit786

看一看觸發和結合here。在代碼觸發一個事件

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

然後綁定到事件

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

來源

2012-11-03 07:50:39 skukx

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()也可以工作。

來源

2012-11-03 08:05:03

任何人都可以請幫忙重新打開這個問題嗎？對此我急需幫助。我已經編輯了我的問題，以便更具體 – irohit786

如何在jquery中創建自定義事件？

回答

相關問題