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.