jQuery基础之事件
相关知识点导航(按自己理解的来)
1, jQuery事件绑定
1.1,eventName(fn);
1.2,on(eventName, fn);
2,jQuery事件移除=>off()
3,jQuery事件冒泡和默认行为
1.什么是事件冒泡?
就是给一个元素及其父元素设置一个事件时,当执行子元素的同时,父元素事件也会触发
2.如何阻止事件冒泡
return false;
event.preventDefault();
3.什么是默认行为?
顾名思义,默认执行的行为,如‘a’这个标签点击跳转到另一个页面,这就是默认行为
4.如何阻止默认行为
return false;
event.preventDefault();
如果想同时阻止事件冒泡和阻止元素默认行为,可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
4,jQuery事件自动触发
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
如果利用triggerHandler自动触发事件, 不会触发默认行为
5,自定义事件
6,事件命名空间
7,事件委托
$(“ul”).delegate(“li”, “click”, function () {})
8,移入移出事件
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
hover事件是方法触发 mouseenter 和 mouseleave 事件的结合体。
1,jQuery事件绑定
jQuery中有两种绑定事件方式
1.1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
1.2.on(eventName, fn);
编码效率略低/ 所有js事件都可以添加
注意点:
可以添加多个相同或者不同类型的事件,不会覆盖,以下实例中,两种方式产生的效果相同
<button>我是按钮</button>
$(function () {// 编写jQuery相关代码$("button").click(function () {alert("hello lnj");});$("button").click(function () {alert("hello 123");});$("button").mouseleave(function () {alert("hello mouseleave");});$("button").mouseenter(function () {alert("hello mouseenter");});$("button").on("click", function () {alert("hello click1");});$("button").on("click", function () {alert("hello click2");});$("button").on("mouseleave", function () {alert("hello mouseleave");});$("button").on("mouseenter", function () {alert("hello mouseenter");});});
2,jQuery事件移除=>off()
$(function () {function test1() {alert("hello lnj");}function test2() {alert("hello 123");}// 编写jQuery相关代码$("button").click(test1);$("button").click(test2);$("button").mouseleave(function () {alert("hello mouseleave");});$("button").mouseenter(function () {alert("hello mouseenter");});// off方法如果不传递参数, 会移除所有的事件// $("button").off();// off方法如果传递一个参数, 会移除所有指定类型的事件// $("button").off("click");// off方法如果传递两个参数, 会移除所有指定类型的指定事件$("button").off("click", test1);});
3,jQuery事件冒泡和默认行为
1.什么是事件冒泡?
就是给一个元素及其父元素设置一个事件时,当执行子元素的同时,父元素事件也会触发
2.如何阻止事件冒泡
return false;
event.preventDefault();
3.什么是默认行为?
顾名思义,默认执行的行为,如‘a’这个标签点击跳转到另一个页面,这就是默认行为
4.如何阻止默认行为
return false;
event.preventDefault();
如果想同时阻止事件冒泡和阻止元素默认行为,可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
$(function () {// 编写jQuery相关代码jQuery阻止冒泡$(".son").click(function (event) {alert("son");// return false;event.stopPropagation();});$(".father").click(function () {alert("father");});jQuery阻止默认行为$("a").click(function (event) {alert("弹出注册框");// return false;//阻止提交按钮的默认行为(提交表单)和事件冒泡event.preventDefault(); });});
4,事件自动触发
事件自动触发有两种
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
如果利用triggerHandler自动触发事件, 不会触发默认行为
$(function () {// 编写jQuery相关代码$(".son").click(function (event) {alert("son");});$(".father").click(function () {alert("father");});// $(".father").trigger("click");// $(".father").triggerHandler("click");/*trigger: 如果利用trigger自动触发事件,会触发事件冒泡triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡*/// $(".son").trigger("click");// $(".son").triggerHandler("click");$("input[type='submit']").click(function () {alert("submit");});/*trigger: 如果利用trigger自动触发事件,会触发默认行为triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为*/// $("input[type='submit']").trigger("click");// $("input[type='submit']").triggerHandler("click");$("span").click(function () {alert("a");});// $("a").triggerHandler("click");$("span").trigger("click");});
5,自定义事件
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
$(function () {// 编写jQuery相关代码// $(".son").myClick(function (event) {// alert("son");// });$(".son").on("myClick", function () {alert("son");});$(".son").triggerHandler("myClick");});
6,jQuery事件命名空间
其实和自定义事件一样,不过区分的人,便于开发
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
$(function () {/*想要事件的命名空间有效,必须满足两个条件1.事件是通过on来绑定的2.通过trigger触发事件*/$(".father").on("click.ls", function () {alert("father click1");});$(".father").on("click", function () {alert("father click2");});$(".son").on("click.ls", function () {alert("son click1");});/*利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发*/// $(".son").trigger("click.ls");$(".son").trigger("click"); //都会触发});
7,jquery事件委托
$(“ul”).delegate(“li”, “click”, function () {})
1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们
由于一般的渲染是直接整个页面渲染的,产出的后果就是 在页面生成之后 ,又生成 的元素就没法选中,因此需要用到事件委托,就是在父元素上开始寻找,由于冒泡,就能在父元素上找到新产生的元素,简单的理解就是坑爹,把自己做不了的事交给老爹办
弹出层练习代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>32-jQuery事件委托练习</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}.mask{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;}.login{width: 522px;height: 290px;margin: 100px auto;position: relative;}.login>span{width: 50px;height: 50px;/*background: red;*/position: absolute;top: 0;right: 0;}</style><script src="js/jquery-1.12.4.js"></script><script>$(function () {// 编写jQuery相关代码$("a").click(function () {var $mask = $("<div class=\"mask\">\n" +" <div class=\"login\">\n" +" <img src=\"images/login.png\" alt=\"\">\n" +" <span></span>\n" +" </div>\n" +"</div>");// 添加蒙版$("body").append($mask);$("body").delegate(".login>span", "click", function () {// 移除蒙版$mask.remove();});return false;});});</script>
</head>
<body>
<!--<div class="mask">--><!--<div class="login">--><!--<images src="data:images/login.png" alt="">--><!--<span></span>--><!--</div>-->
<!--</div>-->
<a href="http://www.baidu.com">点击登录</a>
<div>这里有很多文字</div>
</body>
</html>
8,jQuery移入移出事件
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
hover事件是方法触发 mouseenter 和 mouseleave 事件的结合体。
$(function () {// 编写jQuery相关代码/*mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件*//*$(".father").mouseover(function () {console.log("father被移入了");});$(".father").mouseout(function () {console.log("father被移出了");});*//*mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件推荐大家使用*//*$(".father").mouseenter(function () {console.log("father被移入了");});$(".father").mouseleave(function () {console.log("father被移出了");});*//*$(".father").hover(function () {console.log("father被移入了");},function () {console.log("father被移出了");});*/$(".father").hover(function () {console.log("father被移入移出了");});});
jQuery基础之事件相关推荐
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
- 【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
- jquery中阻止事件冒泡的方法
2019独角兽企业重金招聘Python工程师标准>>> 根据<jquery基础教程> 第一种方法:判断事件的"直接"目标是否是自身,如果不是自身,不予 ...
- 4.3.1 jQuery基础(2)
4.3.1 jQuery基础(2) 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译 人民邮电出版社 我要评论(0) 字号:T | T 综合评级: 想读(1) 在读 ...
- jQuery基础总结!!!
目录 jQuery简介 jQuery库的引用 官网下载jQuery jQuery入门 jQuery常用的API(重要) jQuery选择器 jQuery基础选择器 jQuery隐式迭代 jQuery筛 ...
最新文章
- CentOS安装EMACS文件夹树型图插件与颜色插件
- sql group by having用法_神奇的 SQL,Group By 真扎心,原来是这样!
- pyecharts离线使用说明
- php送数据找不到表,php – 数据源默认值中找不到的模型表
- fl如何保存再次打开_「Excel技巧」Excel2016如何将自己设计的图表存为模板反复使用?...
- android中给TextView或者Button的文字添加阴影效果
- android studio 2.0 导入工程
- hook(钩子函数)
- jsp页面的相关复习
- SQL查询表中的有那些索引
- python pip工具命令_转载 Python 安装setuptools和pip工具操作方法(必看)
- 电子设计从零开始_第二版(1)
- 电子设计教程9:Boost升压电路(MC34063)
- 深度学习系列讲座:谷歌翻译核心技术 Seq2Seq
- Inpaint 强大的去水印、改图软体,轻鬆把不要的物件从相片中移除
- 利用公网Msf+MS17010跨网段攻击内网(不详细立马关站)
- Visual Studio使用教程
- 在运维日常工作过程中遇到的一些问题,以及最终的解决方法!!(持续更新帖)
- 学习平面设计的去哪学,平面设计一般学多久:夏雨老师
- 一个陪我聊天的微信机器人,满足加班打工人寂寞灵魂~
热门文章
- [改善Java代码]不要在构造函数中抛出异常
- 轻松搞定C语言中复杂的声明
- Internet 信息服务承载说明 即IIS安装说明
- jupyter notebook python插件_Python文学化编程-Jupyter notebook使用和插件拓展
- 拓端tecdat|R语言生态学模拟对广义线性混合模型GLMM进行功率(功效、效能、效力)分析power analysis环境监测数据
- 拓端tecdat|stata对包含协变量的模型进行缺失值多重插补分析
- php excel引入tp,TP5引用PHPExcel实现导入导出功能
- Java线程池的学习记录
- 用python进行人脸识别
- 全卷机神经网络图像分割(U-net)-keras实现