jQuery 事件注册和事件处理
1. jQuery 事件注册
jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:
- 优点: 操作简单,且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。
语法
语法: element.事件(function(){}) $ ("div"). click (function(){事件处理程序 } 其他事件和原生基本-致。 比如mouseover. mouseout. blur. focus. change. keydown. keyup. resize. scroll 等
演示代码
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
2. jQuery 事件处理
因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下:
- on(): 用于事件绑定,目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
2.1 事件处理 on() 绑定事件
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
语法
on0方法优势1: . 可以绑定多个事件,多个处理事件处理程序。 $ ("div") .on({ mouseover: function(){}, mouseout: function(){}, click: function(){} }) ; 如果事件处理程序相同
("div") . on ("mouseover mouseout", function() {
on()方法优势2: 可以事件委派操作。事件委派定义是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。 $('ul') .on('click', 'li', function() { alert('hello world!') ; }); 在此之前有bind0, live0 delegate)等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。
on()方法优势3:动态创建的元素, click0 没有办法绑定事件,on0 可以给动态生成的元素绑定事件 ("div") .on("click","p", function(){alert ("俺可以给动态生成的元素绑定事件" )});
演示代码
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托(委派)
// click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
2.3. 事件处理 off() 解绑事件
当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;
语法
off( ) 方法可以移除通过on0方法添加的事件处理程序。("p").off() //解绑p元素所有事件处理程序
演示代码
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
2.4. 事件处理 trigger() 自动触发事件
有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
语法
第一种: trigger( element.click() // 第一种简写形式 element. trigger ("type") // 第二种自动触发模式
第二种: triggerHandler0 element. triggerHandler (type) // 第三种自动触发模式 triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。
演示代码
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点,一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
- 11g dataguard使用总结(r5笔记第12天)
- centos7.4下配置django+uwsgi+nginx
- 11g rac配置scan ip(r6笔记第30天)
- 【C++概念】---vector用法
- 浅谈Orabbix监控指标(r6笔记第27天)
- Orabbix定制监控Oracle的简单配置(r6笔记第26天)
- 【java基础】 线程实例
- 记一次数据库的分析和优化建议(r6笔记第24天)
- linux (ubantu)安装最新版python3.6,以及直接安装anaconda
- 【java基础】匿名类
- 朴素贝叶斯法 2016年11月11日
- 11g中关于控制文件自动备份的改进(r6笔记第22天)
- Java基础(02)-15总结对象数组,集合Collection,集合List
- alert日志中的两种ORA错误分析(r6笔记第21天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python—requests模块详解
- python爬虫伪装请求头---fake-useragent
- Flutter基础widgets教程-RaisedButton篇
- 记一次 excel vba 参考手册爬虫实战,不必要的一次爬虫。
- xray子域名扫描结果导出
- AWS的湖仓一体使用哪种数据湖格式进行衔接?
- python 行政区域地址标准化:业务经理填报的地址乱起八糟,高德接口有点厉害!
- python 行政区域地址标准化:业务经理填报的地址乱起八糟,高德接口有点厉害! -- 后续,使用分词思路完成解析
- pandas 一维台账数据与二维表格数据的转换
- Flutter基础widgets教程-Row篇
- padans 关于数据处理的杂谈 -- 时序数
- python pandas DataFrame 关于重复索引取值的一些坑
- selenium webdriver 如何添加cookie
- Flutter基础widgets教程-Scaffold篇
- python selenium 微信公众号历史文章随手一点就返回首页?郁闷之下只好将他们都下载下来。