jQuery事件

jQuery事件

blur()
focus()
click()
dblclick()
keyup()
keydown()
mouseenter()
mouseleave()
mouseover()
mouseout()
mousedown()
mousemove()
mouseup()
change()
select()
submit()
scroll()
resize()
ready()
load()
... ...

事件绑定及移除

bind( ) 为每个匹配的元素绑定一个或多个事件处理函数

语法：bind( event , fn ) //不能给未来元素添加事件

$("p").bind("click", function(){
    alert( $(this).text() );
});

$('h2').bind({
    mouseover: function (){
        alert('移上');
    },
    mouseout: function (){
        alert('移出');
    }
})

unbind( ) 与 bind( ) 反向的操作，删除元素的一个或多个事件

语法：unbind(event , fnName )

live( ) 把事件绑定到当前及以后添加的元素上面

语法：live( event , fn ) // 1.9.x已经放弃

$("p").live("click", function(){
   alert( $(this).text() );
});

JQ1.4之前用得比较多，现在已被放到不推荐使用列表中
die(event , fnName ) 与 live() 反向的操作，删除先前用live()绑定的事件

delegate( ) 把事件绑定到当前及以后添加的元素上面

语法：delegate( selector , event , fn )

$("ul").delegate("li", "click", function(){
     alert( $(this).html() );
});

JQ1.4之后加入的，和live有点相似
undelegate( selector , event , fnName ) 删除由 delegate() 方法添加的一个或多个事件处理程序

JQ1.7开始引入了全新事件绑定机制

on( ) 把事件绑定到当前及以后添加的元素上面

语法：on( event , selector , fn )

$("p").on("click", function(){ //未来元素无效
    alert( $(this).text() );
}); 

$(“ul”).on( “click” , “li”,  function(){ //未来元素有效
     alert( $(this).html() );
});

off( event , selector , fnName ) on()的反向操作，移除用on()绑定的事件

建议:

从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。
jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经放入不推荐使用列表中，随时会被弃用。

一次性事件

one( ) 为匹配的元素绑定一次性的事件处理函数
语法：one( event , fn ) //未来元素无效
$("p").one("click", function(){
alert( $(this).html() );
});
当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除

合成事件:

hover( )方法

语法：hover(fn1,fn2); // 鼠标进入时执行fn1，鼠标离开时执行fn2

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

toggle( )方法

语法：toggle(fn1,fn2,fn3,fn4...);
$("li").toggle( // 响应匹配元素轮流的click事件
function () { $(this).addClass(“show”); },
function () { $(this).removeClass(“show”); }
);

$(“div”).toggle( ); //显示隐藏

事件流

事件对象

事件对象存储了和事件相关的信息
原生JS事件对象:

oDiv.onclick=function (ev){
      var oEvent=ev||window.event;
      console.log(oEvent); //oEvent即为事件对象
}

JQ处理了其中的兼容问题，可以直接使用

$(‘body’).click(function(e){ 
    console.log(e); //e即为事件对象 
});

阻止冒泡/传播：e.stopPropagation() return false;
阻止默认行为：e.preventDefault(); return false;
事件类型：e.type
触发事件的元素：e.target ( 原生DOM节点 )
指示按了哪个键或按钮：e.which 1 2 3
鼠标的相对坐标：e.clientX/Y e.pageX/Y
事件发生时的时间戳：e.timeStamp(毫秒数)

转换：

在实际工作中，我们可能会有这样的需求
使用JQ获取DOM对象，然后在JS使用
或者JS获取的DOM对象，然后在JQ使用

var box = document.querySelector('#box'); // js对象
var $box = $('#box'); // jq对象

$box[0].style.color = 'blue'; // 转成 js 对象
$box.get(0).style.color = 'blue';// 转成 js 对象

$(box).css('color','red');// 转成 jq 对象

$符冲突问题

在jQuery中，$符是jQuery的别名
所有使用$符的地方都可以使用jQuery来替换
例如：

$('#div').click(....);  
    等同于  
    jQuery('#div').click(....);

当我们引入多个js库后，在另一个js库中也定义了$符的话，我们使用$符号时就会发生冲突。

<script src="prototype-1.6.0.js"></script>
<script src="jquery-1.8.3.js"></script>

jquery最后引入
此时，$符指向jquery中定义的$符号

<script src="jquery-1.8.3.js"></script>
<script src="prototype-1.6.0.js"></script>

prototype最后引入
此时，$符指向prototype中定义的$符号

noConflict()方法

jQuery中的noConflict( )方法的作用就是让jQuery放弃对$符的所有权
当代码中调用该方法后，不可以使用$来调用jQuery方法

$.noConflict( );
$(‘#div’).click(....);   //无效
jQuery(‘#div’).click(....);   //有效

jQuery别名
jQuery中允许我们自定义jQuery的别名

var jq=$.noConflict();
jq(‘#div’).click(....); //有效
jQuery(‘#div’).click(....); //有效
$(‘#div’).click(....); //无效 报错

如何继续使用$符

如果jQuery代码习惯使用$符号，并且不愿意改变这种习惯，可以把$符号作为变量传递给ready方法，函数内可以正常使用$符

$.noConflict( );
jQuery(function ($){
       $(‘h1’).click( function (){ alert($(this).html( ) );
});

Q.E.D.