jQuery学习笔记(5)-事件与事件对象

2018-06-22 07:01:17来源：未知阅读 ()

一、前言

主要讲解事件的绑定与触发

二、jQuery中添加事件

1.使用bind()方法绑定事件

<input id="btn" type="button" value="按钮" />
<script>
    $("#btn").bind("click", function (event) { alert("one"); });
</script>

2.添加多播事件委托

<input id="btn" type="button" value="按钮" />
<script>
    $("#btn").bind("click", function (event) { alert("one"); });
    $("#btn").bind("click", function (event) { alert("two"); });
</script>

3.jQuery事件处理函数

$("p").bind("click", function () { alert($(this).text()); });	为匹配元素的特定事件（像click）绑定一个事件处理器函数
$("p").one("click", function () { alert($(this).text()); });	为匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
trigger( event, [data] )	匹配的元素上触发某类事件
triggerHandler( event, [data] )	触发指定的事件类型上所有绑定的处理函数
$("p").unbind( "click" );	bind()的反向操作，从每一个匹配的元素中删除绑定的事件

三、常用事件函数

1.bind( type, [data], fn )

注意方法签名上data参数，可以在事件处理之前传递一些附加的数据

(1)使用自定义元素属性存储数据

<div id="divMsg" contentType ="Children">这是小孩可以看的内容</div>
<script>
    $("#divMsg").bind("click", function(event) { alert($(event.target).attr("contentType")); });
</script>

(2)使用脚本将数据传递给事件处理函数

<div id="divMsg">这是小孩可以看的内容</div>
<script>
    $("#divMsg").bind("click", { contentType: "Children" }, function (event) { alert(event.data.contentType); });
</script>

2.one( type, [data], fn )

使用和bind()函数一样，但是只执行一次

trigger( event, [data] ) 和 triggerHandler( event, [data] )

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
<script>
    $(function () {
        $("#old").click(function () {
            //点击文本框会聚焦
            $("input").trigger("focus");
        });
        $("#new").click(function () {
            //点击文本宽不会聚焦
            $("input").triggerHandler("focus");
        });
    });
</script>

四、快捷事件 Event Helpers

1.设置单击事件方式：

$("p").click(function (event) { alert("aa"); });
//等效于下面写法
$("p").bind("click", function (event) { alert("aa"); });

2.触发单击事件

$("p").click();
//等效于下面写法
$("p").trigger("click");

3.jQuery的快捷方法列表

blur( fn )/blur( )	当元素失去焦点时发生 blur 事件
change( fn )/change( )	当元素的值改变时发生 change 事件
click( fn )/click( )	当单击元素时，发生 click 事件
dblclick( fn )/dblclick( )	当双击元素时，发生 dblclick 事件
error( fn )/error( )	当元素遇到错误时，发生 error 事件
focus( fn )/focus( )	当元素获得焦点时，发生 focus 事件
keydown( fn )/keydown( )	当键盘键被按下时发生 keydown 事件
keypress( fn )/keypress( )	当键盘键被按下时发生 keydown 事件
keyup( fn )/keyup( )	当键盘键被松开时发生 keyup 事件
load( fn )	当指定的元素已加载时，会发生 load 事件
mousedown( fn )	当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
mouseenter( fn )	当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件
mouseleave( fn )	当鼠标指针离开被选元素时，会发生 mouseleave 事件
mousemove( fn )	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
mouseout( fn )	当鼠标指针离开被选元素时，会发生 mouseout 事件
mouseover( fn )	当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseup( fn )	当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
resize( fn )	当调整浏览器窗口大小时，发生 resize 事件
scroll( fn )	当用户滚动指定的元素时，会发生 scroll 事件
select( fn )/select( )	当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件
submit( fn )/submit( )	当提交表单时，会发生 submit 事件
unload( fn )	当用户离开页面时，会发生 unload 事件