jQuery中的事件

最新推荐文章于 2023-01-07 11:07:03 发布

m_syndra

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量304

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/m_syndra/article/details/79328355

版权

jQuery中的事件

1. 事件绑定

（1） bind(type,[data],fn)

功能：为每个选择元素的事件绑定处理函数，用法与JavaScript的事件监听很像。

type:一个或多个类型的字符串；

data:传递给事件对象的额外数据对象(可不写)；

fn:处理(执行)函数

事件绑定写法

$(“.btn”).click(function(){});

基本写法

$(“.btn”)表示获取要绑定事件的那个元素

$(“.btn”).bind(“click”,function(){});

$(“.btn”).bind(“click”,show);function show(){};

bind()方法

$(“.btn”).bind(“click mouseleave”,function(e){

if(e.type==”click”){

alert(1);

}else

{alert(2);}

})

bind()方法可以一次性绑定多个事件

(如何判断是那个事件？使用e.type进行判断)

（2） on()事件

on()事件效果与bind()事件作用一样，on()事件也可以使用unbind()事件解除。

2. 切换事件

（1） hover()方法

hover(over,out)

功能：当鼠标移动到所选元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数

（2） toggle()方法

toggle(fn1,fn2,[fn3,fn4,…])

功能：每次单击后依次调用函数

该方法在jQuery1.9版本之后就去掉了

3. 移除事件

unbind([type],[fn])

type:移除的事件类型；

fn:需要移除的事件的执行函数；

unbind()方法	功能	移除元素绑定的事件
	带参	移除当前元素指定事件
	不带参	移除当前元素的所有事件

4. 其他事件

（1） one()方法

功能：为所选的元素绑定一个仅触发一次的处理函数

one(type,[data],fn)

type:需要触发什么类型的事件；

data: 传递给事件对象的额外数据对象(可不写)；

fn:执行函数

（2） trigger()方法

功能：在所选择的元素上触发指定类型的事件

trigger(type,[data])

type:触发事件的类型；

data: 传递给函数的附加函数（可不选）；

实例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>jQuery事件绑定</title>

<scriptsrc="jquery-3.0.0.js"></script>

$(function (){

/*基本写法

$("#btn1").click(function(){

});*/

//通过bind() 事件绑定

/* 参数1：事件的类型

参数2：事件的执行函数*/

$("#btn1").bind("click",btnclick);

function btnclick(){

alert(1);

}

//bind（）还可以一次绑定多个事件

var a=1;

$("#btn1").bind("click",function (e){

console.log(a);

});

$("#btn1").bind("click mouseenter",function (e){

if(e.type=="click"){

alert("在单击");

}

else{

alert("鼠标进入");

}

});

//事件切换 hover() enter out

$("#btn2").hover(function(){

//鼠标进入

alert("1");

},function (){

//鼠标离开

alert("2");

});

/* unbind() 不带参数指移除所有的事件

带参移除指定事件*/

/*unbind() 参数2：需要移除的事件执行函数*/

$("#btn3").bind("click",btndata);

function btndata(){

alert(1);

}

$("#btn4").click(function(){

$("#btn3").unbind("click",btndata);

});

/*one方法绑定类似于bind one方法绑定的事件只能执行一次*/

$("#btn5").one("click",function (){

alert(1);

});

/*trigger() */ /*指定事件类型*/

$("#btn6").click(function(){

$("#text").trigger("select");

});

</script>

</head>

<body>

<buttonid="btn1">绑定事件</button>

<buttonid="btn2">事件切换</button>

<buttonid="btn3">移除事件</button>

<buttonid="btn4">移除</button>

<buttonid="btn5">one方法</button>

<buttonid="btn6">trigger方法</button>

<inputtype="text" id="text" value="请输入....."/>

</body>

</html>

m_syndra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的事件

jQuery中的事件1. 事件绑定（1） bind(type,[data],fn) 功能：为每个选择元素的事件绑定处理函数，用法与JavaScript的事件监听很像。type:一个或多个类型的字符串；data:传递给事件对象的额外数据对象(可不写)；fn:处理(执行)函数事件绑定写法$(“.btn”).click(function(){}); 基本写法 $(“.btn”)表示...
复制链接

扫一扫