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方式带额外参数时,字符串参数和其它 ...
随机推荐
- Spring Mvc4 新特性（一）
前言 Spring Framework的Web层,由spring-web,spring-webmvc,spring-websocket和spring-webmvc-portlet模块组成. 很多人刚学 ...
- JAVA发送http GET/POST请求的两种方式+JAVA http 请求手动配置代理
java发送http get请求,有两种方式. 第一种用URLConnection: public static String get(String url) throws IOException { ...
- [NOIP2018TG]保卫王国
[NOIP2018TG]保卫王国 BZOJ luogu 当动态dp模板题写的,(全集-最大点权独立集)不能放军队的+inf,必须放军队-inf即可 注意矩阵乘法的顺序问题 #define ll lon ...
- Python生成器是什么
生成器是 Python 初级开发者最难理解的概念之一,虽被认为是 Python 编程中的高级技能,但在各种项目中可以随处见到生成器的身影,你得去理解它.使用它.甚至爱上它. 提到生成器,总不可避免地要 ...
- asp.net Mvc Npoi 导出导入 excel
因近期项目遇到所以记录一下: 首先导出Excel : 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// < ...
- Hadoop源码如何查看
如何查看hadoop源码 1解压hadoop安装压缩文件成为文件夹,再进入解压后的文件夹下的src文件夹,选中core,hdfs,mapred三个文件夹
- boost atomic
文档: http://www.boost.org/doc/libs/1_53_0/doc/html/atomic.html Presenting Boost.Atomic Boost.Atomic i ...
- PySpider HTTP 599: SSL certificate problem错误的解决方法（转）
前言 最近发现许多小伙伴在用 PySpider 爬取 https 开头的网站的时候遇到了 HTTP 599: SSL certificate problem: self signed certific ...
- 名称空间(Namespaces)（转）
大致来说,命名空间只是将名称映射到对象的容器.正如你可能已经听到的,Python中的所有内容 - 字符串,列表,词典,函数,类等都是一个对象.这样的“名称与对象”的映射使我们能够通过分配给它的名称访问 ...
- pytharm提示过期 License Activation 解决办法
遇到如下问题: 打开网站: http://idea.lanyus.com/ next next ok