jQuery带参数的事件绑定

jQuery在绑定事件的时候我们前面已经实现过了,看看是如何实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">test1</button>
<script src="jquery-3.3.1.js"></script>
<script>
$("#btn1").click(function(){
    alert(button1)
})
</script>
</body>
</html>

在上面的实例中我们对按钮绑定了一个事件,但这个事件是在绑定的时候自己定义的,可是如果我们先定义一个函数那怎么绑定呢?

绑定已有的函数

我们可以事先定义一个函数,然后把和指定的事件进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">test1</button>
<script src="jquery-3.3.1.js"></script>
<script>
function printdata(){
    alert(12345)
}
$("#btn1").click(printdata)
</script>
</body>
</html>

注意,我们在绑定的时候只声明了函数的函数名,并没有参数的传递。可是如果要有参数的传递该怎么办呢?

带参数的函数绑定

其实,在上面我们和事件绑定的参数其实是有一个参数的(event),我们可以查看一下(只放JS代码)

function printdata(){
    console.log(event)
}
$("#btn1").click(printdata)

在按钮被按下的时候可以看一看打印的数据

jQuery带参数的事件绑定

 

可以看出来,这个event是个obj类型的数据,那么我们就可以在这个event里加上我们需要传递的参数

function printdata(event){
    console.log(event)
alert(event.data.data)
}
$("#btn1").click({‘data‘:‘button1‘},printdata)

这样,就实现了和上面一样的效果。

这里有两个要注意的地方:

1.形参event必须显性的指定

2.event.data.data中第一个data指的是参数中的数据是不能换的,而第二个data是我们在传参的时候,参数是以键值对的方式来传递的,这个data就是键值对里的键值。

3.绑定的时候,一定要先写传的参数,在写函数名,不能颠倒。

所以,如果有多个按钮需要绑定这个函数时,就可以直接绑定了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">test1</button>
    <button id="btn2">test2</button>
<script src="jquery-3.3.1.js"></script>
<script>
function printdata(event){
    console.log(event)
alert(event.data.data)
}
$("#btn1").click({data:button1},printdata)
$(#btn2).click({data:button2},printdata)
</script>
</body>
</html>

 

jQuery带参数的事件绑定

上一篇:Php-webdriver 的安装与使用教程


下一篇:kubernetes入门到实战(七)资源管理和Qos