标签:鼠标移动 操作符 over out 动作 seo ide click eve
事件(Event)
页面载入事件
ready(x)
x是事件侦听器,由window或document调用。加载完毕会调用x。
$(document).ready(function(){
})
//可以简写为:$(function(){
})
//或
$(document).ready(aa=function(){
})
//或
$(document).ready(aa)
function aa(){ }
键盘鼠标事件
keyup(x)
x是事件侦听器,键盘按下时或使用鼠标粘贴时会调用x。
$(document).keydown(function () {
alert(‘键盘被按下‘);
});
绑定事件
bind(type,x))
为JQuery对象绑定事件,type是事件触发方式,x是事件侦听器,在侦听器内部可以访问一个叫做event的事件对象(提供事件信息)。
type可能的值:
load、unload、error、blur、focus、resize、scroll、mouseouser、mousemove、mouseup、mousedown、mouseout、mouseenter、mouseleave、click、dbclick、change、select、submit、keydown、keyup、keypress
<body>
<div id="box">hello</div>
<script>
$(document).ready(function () {
var div = $("#box");
div.bind("click", aa);
function aa() {
alert(event.srcElement.outerText);//print hello
alert(this.id);//print box
}
})
</script>
</body>
绑定事件可以如下简化,将type作为方法进行调用。
$(‘p‘).click( function( ) { } )
$(‘p‘).blur( function( ) { } )
追加事件
使用.操作符可以为该对象追加事件,它会按注册事件时的顺序执行。
$(‘li p‘).bind(‘click‘, function () {
}).bind(‘click‘, function () {
})
注销事件
unbind(type,x)
x是可选的事件侦听器,你可以把事件侦听器赋给一个变量x以便于注销事件时提供这个参数。type是可选的事件触发方式。此方法分三种情况:
1.两个参数都不提供会移除该JQuery对象的所有事件
2.只提供type则只移除该JQuery对象的这个事件
3只提供x则只移除该JQuery对象的这个事件
模拟事件
trigger(type,x)
自动触发该对象的事件。 type是事件触发方式类型,x是可选的数组,数组是作为事件侦听器的参数。
//模拟的优势在于你可以随时手动控制事件在何时被触发。
$(‘p‘).bind(‘click‘, function () {
})
$(‘p‘).trigger(‘click‘);
//还可以简化为:
$(‘p‘).click();
如果你自定义了一个事件,可使用此方法触发它,使其得到处理。
<body>
<div id="box">hello</div>
<script>
$(document).ready(function () {
$(‘#box‘).bind(‘myshow‘, function () {
alert();
})
var test = $("p");
//作条件测试,使用trigger方法则事件触发与否控制权就在你手里
if (test) {
$(‘#box‘).trigger(‘myshow‘);//去执行该对象的myshow类型的事件
}
})
//因为test得不到JQuery对象,所以这个事件就不会被触发
</script>
</body>
x作为数组类型的参数提供给事件侦听器
$(‘p‘).bind(‘myshow‘, function (msg,msg2 ) {
})
$(‘p‘).trigger(‘myshow‘, [120, 680]);
附:当trigger执行submit事件时,浏览器也将触发submit事件。这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false。
切换事件
toggle ( clickx , clicky , ……)
为对象绑定多个click事件,clickx是第一次click时的事件侦听器,clicky是第二次click时的事件侦听器。结束后会从新开始。
hover ( clickx , clicky , ……)
为对象绑定多个hover事件,clickx是第一次hover时的事件侦听器,clicky是第二次hover时的事件侦听器。结束后会从新开始。
事件对象
每个事件侦听器都维护了一个JQuery事件对象(event),你可以在方法内部获取它以便取出事件的信息。
$(document).ready(function () {
$(‘#box‘).bind(‘myshow‘, function () {
eventMessage = event.type;//获取事件触发方式
})
})
或在事件侦听器的参数里指定这个event作为参数以便适应它
$(document).ready(function () {
$(‘#box‘).bind(‘myshow‘, function (e) {
eventMessage = e.type;//获取事件触发方式
})
})
属性
type
获取事件触发方式,诸如click、mouseover、keydown
relatedTarget
如果是mouseover事件,获取鼠标是从哪个DOM元素里移动过来的。即返回鼠标从哪个DOM元素中来的。
如果是mouseout事件,获取鼠标移动到了哪个DOM元素里。即返回鼠标到哪个DOM元素中去。
$(document).ready(function () {
$(‘#box‘).bind(‘mouseover‘, function (e) {
alert(e.relatedTarget.innerHTML);
})
$(‘#box‘).bind(‘mouseout‘, function (e) {
alert(e.relatedTarget.innerHTML);
})
})
pageX
获取事件发生时鼠标离客户区的左边距。
pageY
获取事件发生时鼠标离客户区的左边距。
which
获取事件发生时鼠标按下的是左、中、右键中的哪个键,对应的值是1、2、3,或键盘按下的是哪个键。
方法
stopPropagation(x)
x是布尔值,是否组织冒泡。
preventDefault(x)
x是布尔值,是否阻止浏览器默认动作。
target
获取触发事件的DOM元素对象。
originalEvent
获取事件原始对象,鼠标类事件发生时,有效传递了一个MouseEvent对象,MouseEvent派生自event构造器,如果MouseEvent不满足你要获取的事件信息,你可以通过此方法获取event对象。
mataKey
是否按下了ctrl键。
事件命名空间
如果一个JQuery对象绑定了N多的事件,注销时你得一个一个注销,使用事件命名空间就可以一次性注销它们。
$(‘p‘).bind(‘mouseover.Result‘, function () {
})
$(‘p‘).bind(‘click.Result‘, function () {
})
$(‘p‘).bind(‘focus.Result‘, function () {
})
$(‘p‘).unbind(‘.Result‘)
如果一个JQuery对象绑定了N多相同类型的事件,在满足某个条件时你只愿意它触发其中的一个事件,也可以使用命名空间来完成
<p>test</p>
<form>
<input id=‘btn‘ type="submit" value=‘click‘ />
</form>
$(document).ready(function () {
//未定义命名空间的事件
$(‘p‘).bind(‘click‘, function () {
})
//定义了命名空间的事件
$(‘p‘).bind(‘click.Result‘, function () {
})
$(‘#btn‘).click(function () {
$(‘p‘).trigger(‘click!‘)//click!表示匹配所有不包含在命名空间里的click事件
})
})
标签:鼠标移动 操作符 over out 动作 seo ide click eve
原文地址:http://www.cnblogs.com/myrocknroll/p/6944854.html