博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 事件绑定
阅读量:5864 次
发布时间:2019-06-19

本文共 1865 字,大约阅读时间需要 6 分钟。

1. 事件绑定

jquery事件的简单操作:

       $().事件类型(function事件处理);

       $().事件类型();

1.1 jquery事件绑定

       $().bind(事件类型,function事件处理);

       $().bind(类型1 类型2 类型3,事件处理);   //给许多不同类型的事件绑定同一个处理

       $().bind(json对象);              //同时绑定多个不同类型的事件

       (事件类型:click  mouseover  mouseout  focus  blur 等等)

       事件处理:有名函数、匿名函数

1.2 取消事件绑定

       ① $().unbind();                               //取消全部事件

       ② $().unbind(事件类型);                //取消指定类型的事件

       ③ $().unbind(事件类型,处理);      //取消指定类型的指定处理事件

注意:第③种取消事件绑定,事件处理必须是有名函数。

/*****************************************************************************/

//① bind()事件绑定使用

//同一个对象绑定多个click事件
$(function(){
$('div').bind('click',function(){
console.log('谁在碰我?');
});
$('div').bind('click',function(){
console.log('谁又在碰我?');
});
$('div').bind('mouseover',function(){
//给div设置背景色
$(this).css('background-color','lightgreen');
//$('div').css('background-color','lightgreen');
});
$('div').bind('mouseout',function(){
//给div设置背景色
$(this).css('background-color','lightblue');
//$('div').css('background-color','lightgreen');
});
});

 

//② bind()事件绑定简单使用

//为多个不同类型事件绑定同一个处理

//注意:事件彼此通过“一个”空格分隔
$(function(){
$('div').bind('click mouseover mouseout',function(){
console.log('hello');
});
});

 

//③ bind()事件绑定简单使用

//通过一个json对象同时绑定多个不同事件
$(function(){
var jn = {
click:function(){
console.log('谁敢碰我?')
},
mouseover:function(){
console.log('轻轻地小明来了')
},
mouseout:function(){
console.log('轻轻地又走了');
}
}

$('div').bind(jn); //类似attr(json) css(json)

});

//unbind()取消事件绑定操作

//以下f1和f2要定义到最外边,使用没有任何影响

function cancel(){

//取消事件绑定
//$('div').unbind(); //取消全部事件
//$('div').unbind('click'); //把指定事件类型的全部处理都给取消
$('div').unbind('click',f1); //把指定事件类型的具体处理给取消掉(要求:事件处理是"有名函数")
}

/*****************************************************************************/

事件绑定是丰富事件操作的形式而已。

 

从dom2级事件操作开始,同一个对象可以绑定多个同类型的事件,具体如下:

dvnode.addEventListener(‘click’,fn);

dvnode.addEventListener(‘click’,fn);

$(‘div’).click(function);

$(‘div’).click(function);

转载于:https://www.cnblogs.com/yd09023/p/5872718.html

你可能感兴趣的文章
移动开发Html 5前端性能优化指南
查看>>
《系统架构师》——操作系统和硬件基础
查看>>
如何看待一本图书
查看>>
Linux 中如何通过命令行访问 Dropbox
查看>>
开发进度——4
查看>>
JS里验证信息
查看>>
Akka actor tell, ask 函数的实现
查看>>
windows10 chrome 调试 ios safari 方法
查看>>
Hello , Ruby!
查看>>
Netty 4.1.35.Final 发布,经典开源 Java 网络服务框架
查看>>
详解Microsoft.AspNetCore.CookiePolicy
查看>>
SCDPM2012 R2实战一:基于SQL 2008 R2集群的SCDPM2012 R2的安装
查看>>
SQL SERVER中字段类型与C#数据类型的对应关系
查看>>
Linux lsof命令详解
查看>>
SVG path
查看>>
js判断checkbox是否选中
查看>>
多系统盘挂载
查看>>
MySQL函数怎么加锁_MYSQL 函数调用导致自动生成共享锁问题
查看>>
MR1和MR2的工作原理
查看>>
Eclipse中修改代码格式
查看>>