js进阶---12-10、jquery绑定事件和解绑事件是什么
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、相关知识
事件处理
事件绑定
on() 为某些元素绑定一个事件或者多个事件。
该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
事件解绑
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>
js进阶---12-10、jquery绑定事件和解绑事件是什么的更多相关文章
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEv ...
- JS---DOM---为元素绑定事件和解绑事件的兼容代码
1. 绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEve ...
- jq 绑定事件和解绑事件
<!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...
- JS添加事件和解绑事件：addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
随机推荐
- elastic search远程测试
elastic search远程测试 推荐:elastic官方教程:https://www.elastic.co/guide/en/elasticsearch/reference/6.2/index. ...
- pandas 报错：【sys:1: DtypeWarning: Columns (15) have mixed types. Specify dtype option on import or set low_memory=False.】
错误原因 报错提示:“sys:1: DtypeWarning: Columns (15) have mixed types. Specify dtype option on import or set ...
- Hadoop集群的配置的主机和IP
集群配置如下: hadoop 192.168.80.100 hadoop1 192.168.80.101 hadoop2 192.168.80.102 (注:ha ...
- python 的两个模块xlwt,xlrd,写入和读取Excel数据
http://www.cnblogs.com/fireme/p/3887284.html 这上面写的很全,不过我只需要简单的读和写的操作就ok了,下面是我写的读和写入Excel操作 读取Excel数据 ...
- C#驱动级模拟按键操作
C#驱动级模拟按键操作 2013-09-26 03:17 ·AB叔 447 3 <- 点击左侧的数字“攒”一个吧 昨天遇到一个程序自动输入财付通密码的任务. 因为财付通密码控件是有安全保护的,所 ...
- Delphi 正则表达式语法(7): 匹配转义字符
Delphi 正则表达式语法(7): 匹配转义字符 // ? 号的意义是匹配 0-1 次, 如果需要匹配 ? 怎么办 var reg: TPerlRegEx; begin reg := TPe ...
- Codeforces Round #303 (Div. 2)
A.Toy Cars 题意:给出n辆玩具车两两碰撞的结果,找出没有翻车过的玩具车. 思路:简单题.遍历即可. #include<iostream> #include<cstdio&g ...
- kubeadm方式安装kubernetes
系统: Ubuntu 18.04.2 LTS 内存: 8G 机器: 属性 IP Hostname ssh Master 192.168.91.48 blackray-pc node1 1 ...
- MAC 终端颜色设置
在bash中,可以通过更改PS1环境变量的值来设置提示行.通常的提示符颜色单调,用户可以通过在PS1中添加颜色代码序列来设置提示符中不同信息以不同颜色显示. 添加颜色相当容易:第一步是设计不带颜色的提 ...
- 正则表达式和python的re模块
0 正则表达式 0.1 常见的元字符 .: 匹配除\r\n之外的任何单个字符 *: 匹配前面的子表达式任意次,例如Zz*可以匹配Z,可以匹配Zz,也可以匹配Zzzzzzzzzz +: ...