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方式带额外参数时,字符串参数和其它 ...
随机推荐
- Elasticsearch集群 管理
第7章 深入Elasticsearch集群 启动一个Elasticsearch节点时,该节点会开始寻找具有相同集群名字并且可见的主节点.如 果找到主节点,该节点加入一个已经组成了的集群:如果没有找到, ...
- document.cookie = 'wcookie_date=' + wv + ';max-age=60'
js cookie生命周期
- Storm-源码分析- bolt (backtype.storm.task)
Bolt关键的接口为execute, Tuple的真正处理逻辑, 通过OutputCollector.emit发出新的tuples, 调用ack或fail处理的tuple /** * An IBolt ...
- sql语句（mysql中json_contains、json_array的使用）
https://blog.csdn.net/qq_35952946/article/details/79131488 https://www.jianshu.com/p/455d3d4922e1 1. ...
- Pandas 之 过滤DateFrame中所有小于0的值并替换
Outline 前几天,数据清洗时有用到pandas去过滤大量数据中的“负值”: 把过滤出来的“负值”替换为“NaN”或者指定的值. 故做个小记录. 读取CSV文件 代码: import pandas ...
- 商业模式画布模板——From 《商业模式新生代》
看过<商业模式新生代>这本书,确实受益匪浅.书籍本身编写的形式很新颖,以此为模板可以启发自己对于商业模式的思考和定义,五星推荐!!! 下面是用PPT重新绘制的商业模式画布以及说明,希望对大 ...
- jQuery.extend()、jQuery.fn.extend()扩展方法具体解释
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dreamsunday/article/details/25193459 jQuery自己定义了jQu ...
- React官网首页demo(单文件实现版)
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...
- Python 网络编程了解
阅读目录 一: 网络编程socket http://www.cnblogs.com/zhoujunhao/articles/7592671.html 二: TCP粘包处理 http://www.cnb ...
- 常用模块(random,os,json,pickle,shelve)
常用模块(random,os,json,pickle,shelve) random import random print(random.random()) # 0-1之间的小数 print(rand ...