js进阶---12-10、jquery绑定事件和解绑事件是什么

时间:2022-03-02 05:47:07

js进阶---12-10、jquery绑定事件和解绑事件是什么

一、总结

一句话总结:on和off。

1、jquery如何给元素绑定事件?

on方法

22         $('#btn1').on('click',function(){
23 alert('事件绑定')
24 })

2、如何给元素绑定多个事件(两种方法)?

json对象
on方法直接添加多个

22         $('#btn1').on('click',function(){
23 alert('事件绑定')
24 })
25 //绑定多个事件
26 $('#btn1').on('mouseover',function(){
27 $(this).css('background','orange')
28 })
29 $('#btn1').on('mouseout',function(){
30 $(this).css('background','#ccc')
31 })
32
33 //适用对象作为参数
34 $('#btn1').on({
35 click:function(){alert('事件绑定')},
36 mouseover:function(){
37 $(this).css('background','orange')
38 },
39 mouseout:function(){
40 $(this).css('background','#ccc')
41 }

3、如何解除元素的所有事件?

off()方法不带参数

44         //$('#btn1').off()
45         $('#btn1').off('click mouseover')

4、编程语言中移除所有效果一般是方法进行什么操作?

不带参数,比如解绑off()方法

5、如何移除同一个事件(比如click)的多个函数?

参数,指定,

47         $('#btn1').on('click',fn1)
48 $('#btn1').on('click',fn2)
49 function fn1(){
50 alert('事件绑定1')
51 }
52 function fn2(){
53 alert('事件绑定2')
54 }
55 $('#btn1').off('click',fn1)

二、jquery绑定事件和解绑事件是什么

1、相关知识

事件处理

  1. 事件绑定

    on() 为某些元素绑定一个事件或者多个事件。

    该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

  2. 事件解绑

    off() 解除绑定的某一指定的事件或者所有事件。

    “绑定”与“解绑”是相反的关系。在jQuery中,我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。

    对同一元素绑定的多个同一事件进行解绑,可以使用命名空间解决,例如‘click.a’‘click.b’

2、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 100px;height: 100px;border:1px solid green;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<div id="div1"></div>
<input id="btn1" type="button" value="事件绑定">
<script type="text/javascript">
$(function(){
/*
$('#btn1').on('click',function(){
alert('事件绑定')
})
//绑定多个事件
$('#btn1').on('mouseover',function(){
$(this).css('background','orange')
})
$('#btn1').on('mouseout',function(){
$(this).css('background','#ccc')
}) //适用对象作为参数
$('#btn1').on({
click:function(){alert('事件绑定')},
mouseover:function(){
$(this).css('background','orange')
},
mouseout:function(){
$(this).css('background','#ccc')
} })
//$('#btn1').off()
$('#btn1').off('click mouseover')
*/
$('#btn1').on('click',fn1)
$('#btn1').on('click',fn2)
function fn1(){
alert('事件绑定1')
}
function fn2(){
alert('事件绑定2')
}
$('#btn1').off('click',fn1) })
</script>
</body>
</html>