JQuery-事件
时间:2019-10-18
本文章向大家介绍JQuery-事件,主要包括JQuery-事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件
事件绑定
jQuery中的事件绑定,可以绑定多个同名事件而不会发生冲突。
// eventName(fn)
// 编程效率略高,部分事件未能实现
$('.btn').click(function(){
// ...
});
// on(eventName, fn)
// 编程效率略低,所有JS事件都能实现,可以绑定自定义事件
$('.btn').on('click', function(){
// ...
});
事件移除
// 移除指定事件
$('.btn').off('click');
// 移除所有事件
$('.btn').off();
事件自动触发
trigger
$('.btn').trigger('click');
triggerHandler
$('.btn').triggerHandler('click');
trigger 与 triggerHandler 的 区别:
- tigger 不会阻止冒泡事件;triggerHandler 会阻止冒泡事件
- trigger 不会阻止默认事件;triggerHandler 不会阻止默认事件
自定义事件
自定义事件的两个条件:
- 必须通过
on
来进行定义 - 必须通过
trigger/triggerHandler
来进行注册
$('div').on('myClick', function(){
// ...
});
$('div').trigger('myClick');
事件命名空间
命名空间可以有效地管理同一事件的不同监听器,尤其在定义组件的时候可以有效地保证组件内部的事件只在组件内部有效,不会影响到其它组件。
事件命名空间的两个条件:
- 必须通过
on
来进行定义 - 必须通过
trigger/triggerHandler
来进行注册
$('div').on('click.demo1', function(){
// ...
});
事件委托
jQuery中普通的事件监听,只能监听在在绑定事件时DOM中已有的元素,无法监听在绑定之后才添加的DOM元素。这个时候我们就需要进行事件委托,委托页面中已有的元素进行事件监听。
$("ul").delegate("li", "click", function () {
// ...
});
移入移除事件
mouseover/mouseout
事件, 在子元素上移入移出时也会触发父元素的事件mouseenter/mouseleave
, 在子元素上移入移出时不会触发父元素的事件hover
可以监移入移出事件,会触发事件冒泡
原文地址:https://www.cnblogs.com/luwenfeng/p/11700413.html
- 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 数组属性和方法
- PHP入门之数组
- PHP基础之排序
- 关于mysql limit offset的一点优化
- PHP基础之查找
- PHP木马免杀的一些总结
- PHP基础之面向对象篇
- PHP变量覆盖漏洞小结
- 算法复习 : 插入排序原理,记忆,时间复杂度 (7行java实现)
- PHP代码审计01之in_array()函数缺陷
- 分治思想 : 并归排序与其时间复杂度
- java Spring系列之 配置文件的操作 +Bean的生命周期+不同数据类型的注入简析+注入的原理详解+配置文件中不同标签体的使用方式
- 算法系列1 初识算法 算法复杂性模型 算法复杂度的计算
- 树莓派基础实验32:DS1302实时时钟模块实验
- Failed to parse date ["1534467411000"]:Invalid time zone indicator '0'
- 快速排序 : 调优:3亿数据40秒,2亿数据30秒,1亿数据15秒