`

JQuery中的事件

阅读更多

bind(type,data,fn)

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。

多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。

返回值:jquery
参数:
type(string)一个事件类型
data(object)(可选)作为event.data传递给事件处理器函数的额外数据
fn(function)绑定到事件上的函数

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

之前:
<p>hello</p>

结果:
alert("hello")


例子:为事件对象传递一些额外的数据
function handler(event) {
   alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

结果:
alert("bar")

例子:通过返回false来取消默认的行为并阻止事件起泡
$("form").bind("submit", function() { return false; })

例子:通过使用preventdefault方法来仅仅取消默认的动作
$("form").bind("submit", function() { return false; })
例子:通过使用 stoppropagation 方法只阻止事件起泡
$("form").bind("submit", function(event){
   event.stoppropagation();
});
blur()


触发每一个匹配元素的blur事件。这个函数会调用执行绑定到blur事件的所有函数。

注意:这个函数不会调用相应元素的blur方法!如果需要通过代码来使一个元素获得焦点,必须使用dom方法,例如:$("#myinput")[0].blur();
返回值:jquery
例子:
$("p").blur();
之前:
<p >hello</p>
结果:
alert(‘hello‘);

blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数
返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的blur事件的一个方法
例子:
$("p").blur( function() { alert("hello"); } );
之前:
<p>hello</p>
结果:
<p >hello</p>

change(fn)
在每一个匹配元素的change事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的change事件的一个方法

例子:

$("p").change( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


click()
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数

返回值:jquery

例子:
$("p").click();

之前:
<p >hello</p>

结果:
alert(‘hello‘);


click( fn )
在每一个匹配元素的click事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的click事件的一个方法

例子:
$("p").click( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


dblclick( fn )
在每一个匹配元素的dblclick事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的dblclick事件的一个方法

例子:
$("p").dblclick( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


error( fn )
在每一个匹配元素的error事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的error事件的一个方法

例子:
$("p").error( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


focus()
触发每一个匹配元素的focus事件。这个函数会调用执行绑定到focus事件的所有函数。

注意:这个函数不会调用相应元素的focus方法!如果需要通过代码来使一个元素获得焦点,必须使用dom方法,例如:$("#myinput")[0].focus();

返回值:jquery

例子:
$("p").focus();

之前:
<p >hello</p>

结果:
alert(‘hello‘);


focus( fn )
在每一个匹配元素的focus事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的focus事件的一个方法

例子:
$("p").focus( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


hover( over, out )
一个模仿悬停事件(鼠标移动到一个对象上面,及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素 中的检测(例如,处在div中的图像),如果是,则会继续保持“悬念”状态,而不触发移出事件(修正了使用mouseo ut事件的一个常见错误)。

返回值:jquery
参数:
over(function)鼠标移动元素上触发的函数
out(function)鼠标移出元素出发的函数

例子:
$("p").hover(function(){
   $(this).addclass("hover");
},function(){
   $(this).removeclass("hover");
});


keydown( fn )
在每一个匹配元素的keydown事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)在每一个匹配元素的keydown事件中绑定的处理函数

例子:
$("p").keydown( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


keypress( fn )
在每一个匹配元素的keypress事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)在每一个匹配元素的keypress事件中绑定的处理函数

例子:
$("p").keypress( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


keyup( fn )
在每一个匹配元素的keyup事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)在每一个匹配元素的keyup事件中绑定的处理函数

例子:
$("p").keyup( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


load( fn )
在每一个匹配元素的load事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的load事件的一个方法

例子:
$("p").load( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


mousedown( fn )
在每一个匹配元素的mousedown事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的mousedown事件的一个方法

例子:
$("p").mousedown( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


mousemove( fn )
在每一个匹配元素的mousemove事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的mousemove事件的一个方法

例子:
$("p").mousemove( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


mouseo ut( fn )
在每一个匹配元素的mouseo ut事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的mouseo ut事件的一个方法

例子:
$("p").mouseo ut( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


mouseo ver( fn )
在每一个匹配元素的mouseo ver事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的mouseo ver事件的一个方法

例子:
$("p").mouseo ver( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


mouseup( fn )
在每一个匹配元素的mouseup事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的mouseup事件的一个方法

例子:
$("p").mouseup( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


one( type, data, fn )
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回 false。

多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。

返回值:jquery
参数:
type(string)一个事件类型
data(object)(可选)作为event.data传递给事件处理器函数的额外数据
fn(function)绑定到事件上的函数

例子:
$("p").one("click", function(){
   alert( $(this).text() );
});

之前:
<p>hello</p>

结果:
alert("hello")


ready(fn)
当dom载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在dom载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的javascript函数都需要在那一刻执行。

请确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

返回值:jquery
参数:
fn(function)当dom准备好的时候执行的方法

例子:
$(document).ready(function(){ your code here... });


例子:
uses both the shortcut for $(document).ready() and the argument to write failsafe jquery code using the $ alias, without relying on the global alias.
jquery(function($) {
   // your code using failsafe $ alias here...
});


resize( fn )
在每一个匹配元素的resize事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的resize事件的一个方法

例子:
$("p").resize( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


scroll( fn )
在每一个匹配元素的scroll事件中绑定一个处理函数

返回值:jquery
参数:
fn(function)绑定到每一个匹配元素的scroll事件的一个方法

例子:
$("p").scroll( function() { alert("hello"); } );

之前:
<p>hello</p>

结果:
<p >hello</p>


select()
触发每一个匹配元素的select事件。这个函数会调用执行绑定到select事件的所有函数,并且在匹配元素上调用浏览器的默认动作。这个默认的动作可以通过从绑定到select事件的方法中返回false避免。

返回值:jquery

例子:
$("p").select();

之前:
<p >hello</p>

结果:
alert(‘hello‘);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics