Jquery 事件小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。什么是事件？页面对不同访问者的响应叫做事

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

页面加载

DOM提供了load事件用于页面加载完毕之后执行机制，jQuery提供了ready()方法实现相似功能。但DOM中的load事件与jQuery中的ready()方法具有以下三种区别:

DOM 提供了 load 事件用于页面加载完毕之后执行机制，jQuery 提供了 ready()方法实现相似功能。但 DOM 中的 load 事件与 jQuery 中的 ready()方法具有以下三种区别:

DOM 中的 load 事件:

1.没有任何简写形式

2 .当 HTML 页面加载完毕之后触发 load 事件

3.一个 HTML 页面仅允许存在一个 load 事件

jQuery中的ready()方法:

具有简写形式
当DOM节点树加载完毕之后调用ready()方法
一个HTML_页面允许存在多个ready()方法

jQuery 中的 ready()方法:

具有简写形式
当 DOM 节点树加载完毕之后调用 ready()方法
一个 HTML_页面允许存在多个 ready()方法

$(document).ready(function()f);
$().ready(function()f});
$(function()0);

事件绑定

单事件绑定

jQuery提供了bind()方法完成事件绑定功能，具体语法如下:

$element.bind(type, data, callback);

type:含有一个事件类型的字符串。
data:作为event.data属性值传递给事件对象的额外数据对象。
callback:绑定到每个匹配元素的事件上面的处理函数。

$("h5.head").bind(" click",function(){
    var $content = $(this).next("dix.content");
    if($content.is(":visible")){
    	$content.hide();
    }else{
    	$content.show();
    }
});

单事件解绑

jQuery提供了unbind()方法完成事件解绑定功能，具体语法如下:

$element.unbind(type[, data, callback]);

type:删除含有一个事件类型的字符串。
data: 作为eventdata属性值传递给事件对象的额外数据对象。
callback:绑定到每个匹配元素的事件上面的处理函数。

$("h5.head").unbind("click");

多事件绑定

jQuery提供了bind()方法完成事件绑定功能，具体语法如下:

$element.bind(type, data, callback);

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。
data:作为event.data属性值传递给事件对象的额外数据对象。
callback:绑定到每个匹配元素的事件上面的处理函数。

$("#panel h5.head").bind("mouseover mouseout",function(){
	var $content = $(this).next("dix.content");
	if($content.is( ":visible")){
		$content.hide();
	}else{
	$content.show();
}

事件绑定方法对比

jQuery由于版本不同，完成事件绑定的方法不仅bind()方法，还有以下几种方法:

one(type[,data, fn])方法:为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
bind(typel[, data, fn])方法:为每个匹配元素的特定事件绑定事件处理函数。
on(events,[selector],Idata],fn)方法:为每个匹配元素绑定一个或多个事件的事件处理函数。jQuery 1.7版本新增方法。
live(typel[,datal,fn])方法:该方法可实现事件委托效果。jQuery 1.7版本该方法被移除。
delegate(selectorl[,type][,data],fn)方法:该方法可实现事件委托效果。jQuery 1.6版本新增方法。

事件切换

`hover()`方法

jQuery提供了hover()方法模拟鼠标悬停事件效果，具体语法如下:

$element.hover([over,] out);

over:鼠标移到元素上要触发的函数。
out:鼠标移出元素要触发的函数。

$("h5.head").hover(function(){
	var $content = $(this).next("dix.content");
	$content.show();
}, function(){
	var $content = $(this).next("div.content");
	$content.hide();
});

jQuery提供了toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。

具体语法如下:

$element.toggle(fn, fn2[, fn3, fn4,..]);

fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3, fn4,...:更多次点击时要执行的函数。

$("h5.head").toggle(function(){
	var $content = $(this).next("dix.content");
    $content.show();
}, function(){
	var $content = $(this).next("dix.content");
    $content.hide();
});

事件模拟

`trigger()`方法

jQuery提供了trigger()方法用于模拟触发匹配元素绑定的事件，具体语法如下:

$element.trigger(type[, data]);

type:一个事件对象或者要触发的事件类型。
data:传递给事件处理函数的附加参数。

$('#btn').bind("click", function(){
	$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
	$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
	$('#test').append("<p>我的绑定函数3</p>");
});
$('t#btn').trigger("click");

Jquery 事件