JavaScriptMVC之专用事件

JavaScriptMVC提供了一串很有用的专用事件。

下述的只是一个简短的概述。

默认事件

让你给一个事件提供默认的行为，它使用event.preventDefault()可以防止事件冒泡。 这个对像下述的配件提供DOM的API是非常有用的。

$("#tabs").delegate(".panel","default.open", function(){
  $(this).show()
}) 

 

销毁事件

如果一个元素从页面删除，也要把它绑定过的事件销毁。

$("#contextMenu").bind("destroyed", function(){
  // cleanup
  $(document.body).unbind("click.contextMenu");
}) 

 

拖拉和投放事件

 
使用事件委托监听拖放事件。

$(".item").live("dragover", function(ev, drag){
  // let user know that the item can be dropped
  $(this).addClass("canDrop");
}).live("dropover", function(ev, drop, drag){
  // let user know that the item can be dropped on
  $(this).addClass('drop-able')
})

 

 

注：下述的所有事件在使用之前，需要引入这些事件的插件文件，都在jquery/event这个文件夹下面。

1、拖拉

jQuery提供拖拉事件为一个专用事件。一个jQuery.Drag实例是创建一个拖拉且把它当成参数传递给拖拉事件的回调函数。 在拖拉事件中调用函数，你可以报出这个拖拉的行为。

拖拉事件

这个拖拉插件允许你监听以下事件：

1、dragdown 鼠标按下
2、draginit 拖拉监听开始
3、dragmove 拖拉元素移动
4、dragend 拖拉元素静止移动
5、dragover 拖拉对象经过一个落脚点
6、dragout 拖拉对象移出一个落脚点

只要绑定或者委托给这些事件的其中一个，你就可以让这个元素拖拉。你可以在拖动的回调中通过调用方法来修改拖拉的行为。

//makes the drag vertical
$(".drags").delegate("draginit", function(event, drag){
  drag.vertical();
})
//gets the position of the drag and uses that to set the width
//of an element
$(".resize").delegate("dragmove",function(event, drag){
  $(this).width(drag.position.left() - $(this).offset().left   )
})

 

拖拉对象

拖拉对象是通过拖拉事件传递给事件的回调函数。通过调用方法来改变这个拖拉对象的属性，
你可以知道拖拉的行为。

拖拉对象的属性和方法：

1、cancel 停止拖拉的监听，也就是不能拖拉

2、ghost 就是拖拉元素的副本

3、horizontal 拖拉元素只能在水平方向拖动

4、location 拖拉元素在界面上坐标

5、mouseElementPosition 鼠标在拖拉元素上的坐标

6、only 只拖拉，不投放

7、representative 拖拉这个元素的代码元素

8、revert 拖拉元素以动画的效果返回原始坐标处

9、vertical 拖拉元素只能在垂直方向拖动

10、limit 拖拉元素只能在一个元素内拖动

11、scrolls 拖拉元素拖动时让一个滚动条滚动。

例子：

steal("jquery/event/drag",
    "jquery/event/drag/scroll",
    "jquery/event/drag/limit").then(function($){
//drag with bind
$("#drag").bind("draginit",function(){})

//delegated drags
$("#delegate").delegate(".handle","draginit",function(){})

//ghost
$("#ghost").bind("draginit",function(ev, drag){drag.ghost()})

//revert
$(".revert").bind("draginit",function(ev, drag){ drag.revert() })

//limit
$("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )})

//representative
$("#repdrag").bind("draginit",function(ev, drag){drag.representative($("#representative"),50,30)})

//horizontal
$("#horizontal").bind("draginit",function(ev, drag){drag.horizontal()})

//distance
$('#distance').bind('dragdown', function(ev, drag){
    ev.preventDefault();
    drag.distance(50)
})

//scrolls
$("#scroll-drag").bind("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )})

// allow form elements to be selected
$("#form-drag").bind("dragdown",function(ev, drag){
    if(ev.target.nodeName.toLowerCase() == 'input'){
        drag.cancel();
    }
})
})

 

2、投放

jQuery提供投放事件为专用事件。 绑定一个投放事件，在对应的拖拉对象执行期间过程中将会被调用你定义的回调函数。

投放事件 所有投放事件被调用用了3个参数，对应事件，一个投放实例，和特定的拖拉对象。 这里是投放可用的事件：
1、dropinit 拖拉监听已经开始，投放坐标开始计算。
2、dropover 一个拖拉对象经过一个投放元素
3、dropout 一个拖拉对象移动一个投入元素
4、dropmove 一个拖拉对象经过一个投放元素，重复调用元素的移动。
5、dropon 一个拖拉对象释放在一个投放元素上
6、dropend 拖拉监听完成

例子：

//创建一个可拖动的拖拉对象
$('.handle').live("draginit", function(){})
           
//添加投放对象来监听拖拉对象进入，经过，投放等动作
$('#dropout')
  .delegate(".dropout","dropover", function(){ $(this).addClass('over') })
  .delegate(".dropout","dropout", function(){ $(this).removeClass('over') })
  .bind("dropover", function(){ $(this).addClass('over') })
  .bind("dropout", function(){ $(this).removeClass('over') });
   
//关闭dropout/dropover
$("#undelegate").click(function(){
    $('#dropout').undelegate(".dropout","dropover");
    $('#dropout').undelegate(".dropout","dropout");
})
   
//添加dropmove/dropon
var count = 0
$('.dropmove')
  .bind('dropmove', function(){
    $('.count').text(count++)
  })
  .bind('dropon', function(){
    $(this).text("Dropped on!")
  })

 

 
3、暂停/恢复

添加jquery/event/pause插件就通过暂停和恢复事件。

$('#todos').bind('show', function(ev){
  ev.pause();

  $(this).load('todos.html', function(){
    ev.resume();
  });
}) 

 

当一个事件暂停后，停止调用这个事件的其它事件句柄。但是当恢复这个事件后， 它会将调用暂停后的其它事件句柄。 jquery/event/pause插件是在default事件插件上实现的，让我们更加容易使用异步API创建控件。

在这里我们还要讲到一个函数：
triggerAsync：当触发一个事件已经完成DOM冒泡且preventDefault没有执行。

$('panel').triggerAsync('show', function(){
    $('#panel').show();
},function(){
    $('#other').addClass('error');
});

 

4、default事件

允许你执行default动作像一个事件。
监听一个default事件很简单，只是给事件加一个default的前缀即可，使用方法与一般事件一样：

$("div").bind("default.show", function(ev){ ... });
$("ul").delegate("li","default.activate", function(ev){ ... });

 

5、destroyed
给元素提供销毁事件。

当元素从DOM销毁后销毁事件会被触发。销毁事件不冒泡，所以不能使用live或者delegate来
绑定销毁事件。

$(".foo").bind("destroyed", function(){
   //clean up code
})

 

6、Hover

提供委托悬挂事件。 当鼠标移动到一个元素上停止一定时间周期会产生一个悬挂事件。你可以监听或者配置悬挂下述事件：

1、hoverinit 鼠标进入元素时调用，使用这个事件去定制delay和distance。
2、hoverenter 一个元素开始悬挂
3、hovermove 鼠标移动到一个已经悬挂的元素上。
4、hoverleave 鼠标离开悬挂元素。

常常，我们如果不使用其它页面UI的话，就会碰到按钮，表格行等元素，当鼠标经过或者悬挂在它们上面时，需要做一些样式的变化， 来达到醒目的效果。所以这个悬挂事件是很有用的。下述给出一个鼠标经过表格行时，行背景颜色变化。

示例代码：

$('tr').bind("hoverenter",function(){
  $(this).addClass("hovering");
})
$('tr').delegate("hoverleave",function(){
  $(this).removeClass("hovering");
})

 

代码当鼠标悬挂在表格某一行中，添加hovering样式，离开后删除hovering样式。