jquerydom对象的事件隐藏显示和对象数组案例

发布时间：2023-08-22 14:57:02 所属栏目：教程来源：

导读：jquerydom对象的事件隐藏显示和对象数组示例

1.事件处理

1.1.事件绑订

bind(type,fn);

例子:

代码如下:

$(function(){

//正式的写法

$('#d1').bind('click',functi

jquerydom对象的事件隐藏显示和对象数组示例

1.事件处理

1.1.事件绑订

bind(type,fn);

例子:

代码如下:

$(function(){

//正式的写法

$('#d1').bind('click',function(){

$(this).css('font-size','80px');

});

//简写形式

$('#d1').click(function(){

$(this).css('font-size','80px');

});

});

1.2.绑订方式的简写形式

代码如下:

click(function(){

});

1.3.合成事件

hover(enter,leave) : 模拟光标悬停事件

toggle(fn1,fn2...) : 模拟鼠标连续单击事件

例子1:

代码如下:

$(function(){

//分开的事件

$('.s1').mouseenter(function(){

$(this).addClass('s2');

});

$('.s1').mouseleave(function(){

$(this).removeClass('s2');

});

//合成事件

$('.s1').hover(function(){

$(this).addClass('s2');

},function(){

$(this).removeClass('s2');

});

});

例子2:

代码如下:

$(function(){

$('#a1').toggle(function(){

$('#d1').show('slow');

},function(){

$('#d1').hide('slow');

});

});

1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点

1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可，比如e

//e不是真正的事件对象，而是对底层的事件对象的一个封装

click(function(e){

});

例子1:

代码如下:

$(function(){

$('a').click(function(e){

//e:jQuery对象，里面包含了一个事件对象。

//target属性返回的是一个dom对象，即事件源。

var srcObject = e.target;

alert(srcObject.innerHTML);

});

});

1.4.2.停止冒泡

event.stopPropagation();

例子2:

代码如下:

$(function(){

$('a').click(function(e){

alert('你点击了一个链接');

//停止冒泡

e.stopPropagation();

});

$('#d1').click(function(e){

alert('你点击了一个div');

});

});

1.4.3.停止默认行为

event.preventDefault();//比如表单提交

例子3:

代码如下:

$(function(){

$('a').click(function(e){

var flag = confirm('是否确定删除?');

if(!flag){

//停止默认行为

e.preventDefault();

}

});

});

1.5.事件对象的属性

event.type : 事件类型

event.target : 返回事件源（是dom对象!!!）

event.pageX/pageY : 点击的点的坐标

例子4:

代码如下:

$(function(){

$('a').click(function(e){

alert(e.type); //获得事件类型

alert(e.pageX + ' ' +e.pageY);

});

});

1.6.模拟操作//如.$('xxx').mouseenter();

$('xxx').trigger('被模拟的事件');//也可以简化

例子5:

代码如下:

$(function(){

$('#b1').click(function(){

//让username对应的文本输入框获得焦点

$('#username').trigger('focus');

//另外，也可以简化

$('#username').focus();

});

});

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!