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方式带额外参数时,字符串参数和其它 ...
随机推荐
- eclipse中jar file与runnable jar file的区别
直接运行 .class的方法 java -cp . com.network.Chat , 不用加.class后缀 从eclipse中export 的jar file,仅仅是把.class ...
- 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 ...
- Python爬虫之-Requests
Requests模块 Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了. 它是为另一个时代.另一个互联网所创建的.它需要巨量的 ...
- JavaScript教程1
1.什么是 JavaScript? JavaScript 是一门跨平台.面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.应用于 HTML 文档能够在 ...
- App doesn't auto-start an app when booting the device in Android
From Android 3.1, newly installed apps are always put into a "stopped" state and the only ...
- python学习之路-第三天-函数
函数 函数的定义关键字:def 使用global语句可以清楚地表明变量是在外面的块定义的 示例:(函数运行完毕后x的值是2) #!/usr/bin/python # Filename: func_gl ...
- network FAQ
@1: 参考 ifconfig eth0之后IP总是自动清除,解决方法, 修改vim /etc/network/interfaces 然后执行sudo /etc/init.d/networking r ...
- beego——模板语法
一.基本语法 go统一使用{{和}}作为左右标签,没有其它的标签符号. 使用"."来访问当前位置的上下文,使用"$"来引用当前模板根级的上下文,使用$var来访 ...
- Linux基础以及简单命令
1. UNIX是什么 UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序.特点:多用户和多任务 2. GNU项目与自由软件 GPL条款是为保证GNU软件可以自由地使用 ...
- Phpstorm 换行设置（复制 http://jingyan.baidu.com/article/86fae346b2cb673c49121ad3.html）
很多时候代码太长超出了屏幕的宽度,默认情况下没有自动换行的,我们需要把光标往后挪,才能看到后面代码,显得略为蛋疼,我个人比较喜欢能够自动换行. 下面就说下Phpstorm里如何默认开启自动换行(use ...