jQuery 第五章 实例方法 事件
.click / keydown / mouseenter ...
------------------------------------------------------------------------------------------
.on()
绑定事件的方法on, 相当于 原生js 里的 addEventListener() 方法。
第一种 参数， .on( events [, selector ] [, data ], handler(eventObject) )
events 为 事件类型(例如 click)
[selector] 可填 过滤条件， (例如 ‘p’ 标签， '.wrapper' 类 等等 如果该dom 不符合条件， 则不会触发)
[data] 存信息，存数据等， 会放在 事件函数上的 e.data
handler 为 事件处理函数 事件触发后， 要执行的函数。
第二种 参数 ，.on( events [, selector ] [, data ] )
events 为 对象，一个对象，键 填 事件类型，值为 处理函数 .on({ click: function(){} })
[selector] 可以填过滤条件， (例如 ‘p’ 标签， '.wrapper' 类 等等 如果该dom 不符合条件， 则不会触发)
[data] 存信息，存数据等， 会放在 事件函数上的 e.data
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .wrapper{
10 width: 100px;
11 height: 100px;
12 border: 1px solid black;
13 }
14 </style>
15 </head>
16 <body>
17
18 <div class="wrapper">1</div>
19
20 <script src="./jquery/jquery.js"></script>
21 <script>
22 $('.wrapper').on('click', function(){ //给 wra 绑定了 点击事件 弹出 1
23 alert(1)
24 })
25 $('.wrapper').on('mouseenter',function(){ //给 wra 绑定了 鼠标进入事件 弹出 2
26 alert(2)
27 })
28 $('.wrapper').on({ //给 wra 绑定了 鼠标离开事件 弹出 3
29 mouseleave:function(){
30 alert(3)
31 }
32 })
33 </script>
34 </body>
35 </html>
有个注意 事项，如果 想要传入的 data 值为 字符串， 就得为 第二个参数占个位置， 不然 系统会 认为 你的 字符串 是第二个参数的
.on( 'click','我很帅',function(){} ) 这样会认为 第二个参数是过滤条件 但是我们 想的是 第二个值为 data， 所以要为第二个值 占个位
.on('click','', '我很帅', function(){}) 第二个值放个空字符串， 或者 null ， 如果 data 值不是字符串，占不占位 就无所谓了。
.one
其实跟on 方法一样，参数方面也一样 ，只不过人家 触发一次而已。
一般 这个方法， 用在 广告上居多。 以下模拟一个应用
点击百度一下， 我先 跳到淘宝， 为淘宝做一个广告， 然后，第二次点击的时候， 再跳百度
.off()
取消已绑定了的事件
参数方面，如果不填的话 .off() 会取消掉 你选择器选中的 dom 元素身上的全部事件， 如果只填了 .off('click')， 则会取消掉该dom元素身上的全部 click 事件。如果， 绑定的时候填了第二个参数，.on('click', 'li', function(){}) , 则取消事件的时候， 第二参数要跟 绑定的时候一样。.off('click', 'li', function(){})
语法如下 ↓
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 div{
10 width: 100px;
11 height: 100px;
12 border:1px solid black;
13 }
14 </style>
15 </head>
16 <body>
17
18 <div></div>
19
20 <script src="./jquery/jquery.js"></script>
21 <script>
22 function clickOne(){
23 console.log('clickOne') //鼠标点击执行函数
24 }
25 function mouseenterOne(){ //鼠标进入执行函数
26 console.log('clickOne')
27 }
28 $('div').on('click',clickOne) //div绑定了点击事件
29 $('div').on('mouseenter',mouseenterOne) //div绑定了鼠标进入事件
30
31 $('div').off() //取消掉 选择器选中的 div 身上的全部事件
32
33 $('div').off('click') //取消掉 选择器选中的 div 身上的全部 click 事件，(mouseenter) 其他事件不受影响
34
35 $('div').off('click',clickOne) // 单独取消掉 click事件 为clickOne函数 的事件 其他事件不受影响
36
37 //注意点
38
39 $('div').on('click','.wra',clickOne)
40 // 如果像上面 使用了 第二个参数， 那么 取消事件， 也要写上 第二个参数，要跟绑定的第二参数一样。
41 // 不要自作聪明的 写上， '.wra:eq(0)' 等等
42 $('div').off('click','.wra',clickOne)
43
44
45 </script>
46 </body>
47 </html>
.trigger()
自定义事件，既可以手动触发 系统的事件， 也可以 触发 自定义事件，自定义事件是什么呢， 例如 我绑定了一个 clickOne 事件，系统是没有这个事件的， 自己创造的事件，为 自定义事件。绑定 自定义事件， 用 on 方法就可以绑定了。
首先来看一下， 手动触发 系统事件
绑定自定义事件：
有人可能会问， trigger() 可以用在什么地方上了， 其实有很多地方已经有应用到了， 举个例子， 大家在网上看 电影，电视剧之类的，可能观看之前，会有一个 十几秒的广告， 广告 有个 × 给你点击， 点击后消失， 或者 十几秒后 广告自动消失， 这里就会用到trigger事件， 点击× 之后 消失，这是用户点击的 或者，十几秒后，系统帮你触发 trigger() 方法，执行了 click 事件。 这样， 就不用单独再写 一个 十几秒后关闭广告的 方法。 十几秒后直接 调用 trigger 即可。
下面，模仿一下， on 和 trigger 的原理, on 的话 就不要 兼容 系统事件了， 只模仿 自定义事件
下面的代码，写在， 自己 创建的 MyJquery.js 中 直接看 73行 myOn 方法
1 (function(){
2 function jQuery(selector){
3 return new jQuery.prototype.init(selector);
4 }
5 jQuery.prototype.init = function (selector) {
6 this.length = 0;
7 if (selector == null) {
8 return this;
9 }
10 if(typeof selector == 'string' && selector.indexOf('.') != -1 ){
11 var dom = document.getElementsByClassName(selector.slice(1));
12 }else if(typeof selector == 'string' && selector.indexOf('#') != -1 ){
13 var dom = document.getElementById( selector.slice(1) );
14 }else if(typeof selector == 'string'){
15 var dom = document.getElementsByTagName(selector);
16 }
17
18
19 if(selector instanceof Element || dom.length == undefined ){
20 this[0] = dom || selector;
21 this.length ++;
22 }else{
23 for( var i = 0; i < dom.length; i++ ){
24 this[i] = dom[i];
25 }
26 this.length = dom.length;
27 }
28 }
29 jQuery.prototype.pushStack = function (dom) {
30 if (dom.constructor != jQuery) {
31 dom = jQuery(dom);
32 }
33 dom.prevObj = this;
34 return dom;
35 }
36 jQuery.prototype.css = function(config){
37 for(var i = 0; i < this.length; i++){
38 for(var prop in config){
39 this[i].style[prop] = config[prop];
40 }
41 }
42 return this;
43 }
44
45 jQuery.prototype.get = function(num) {
46 return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
47 }
48
49 jQuery.prototype.eq = function (num) {
50 var dom = num == null ? null : (num < 0 ? this[num + this.length] : this[num]);
51 return this.pushStack(dom);
52 }
53
54 jQuery.prototype.add = function (selector) {
55 var baseObj = this;
56 var curObj = jQuery(selector);
57 var newObj = jQuery();
58
59 for (var i = 0; i < baseObj.length; i++) {
60 newObj[newObj.length++] = baseObj[i];
61 }
62 for (var i = 0; i < curObj.length; i++) {
63 newObj[newObj.length++] = curObj[i];
64 }
65
66 return this.pushStack(newObj);
67 }
68
69 jQuery.prototype.end = function () {
70 return this.prevObj;
71 }
72
73 jQuery.prototype.myOn = function(type, func){
74 // 由于，我们 选择器选的 dom 有时候是多个，所以 用for 循环
75 for(var i = 0; i < this.length; i ++){
76 if(!this[i].cacheEvent){ //由于 myOn 和 myTrigger 方法, 选的是同个 dom 但是,并不是同个 jquery 对象 所以
77 // 把事件和函数放在 dom 身上， 不能放在 jquery 对象上。
78 this[i].cacheEvent = {}
79 //if判断 dom身上，有没有cacheEvent，没有的话 加上 {} 因为，我们需要 用一个容器，存他的 事件，和函数
80 }
81 if(!this[i].cacheEvent[type]){
82 //上面 创建好容器后， 就开始把 事件 和函数，放到dom上去了。 dom.cacheEvent{ type: [func] }
83 this[i].cacheEvent[type] = [func];
84 }else{
85 // 因为原生的jquery 是可以 执行多个相同的 事件的， 所以 如果是相同的， push 进去就可以
86 this[i].cacheEvent[type].push(func);// dom.cacheEvent{ type: [func,func] }
87 }
88 }
89 }
90
91 jQuery.prototype.myTrigger = function(type){
92 //上面的 myOn 方法， 已经把 事件和 函数存到 dom 身上了， 直接for循环拿出来 执行就可以
93 var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
94 //但是， 由于 trigger 方法是可以 传 参数的，所以 截他的 形参 除了第一个参数是 type ，后面的 都截下来
95 var self = this;
96 for(var i = 0; i < this.length; i ++){//循环 dom，把dom身上的 dom.cacheEvent{ type: [func] } 拿出来执行
97 if(this[i].cacheEvent[type]){
98 this[i].cacheEvent[type].forEach(function(ele, index){
99 ele.apply(self, params);// 传入 我们截好的 数组，第一个 放self，这里的this 指向window。 所以要拿外面的this
100 })
101 }
102 }
103 }
104
105 jQuery.prototype.init.prototype = jQuery.prototype;
106
107 window.$ = window.jQuery = jQuery;
108 })()
.click / keydown / mouseenter ...
.hover()
.hover() 方法，是 .mouseenter() 和 .mouseleave() 的结合体
参数： .hover(function(){},function(){}) 要放两个函数， 第一个为 鼠标进入函数， 第二个为鼠标离开函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height: 100px;
border:1px solid black;
}
</style>
</head>
<body> <div></div> <script src="./jquery/jquery.js"></script>
<script> $('div').mouseenter(function(){
console.log('鼠标进入')
}).mouseleave(function(){
console.log('鼠标离开')
}) $('div').hover(
function(){console.log('鼠标进入')},
function(){console.log('鼠标离开')}
) //一样的结果，
</script>
</body>
</html>
jQuery 第五章 实例方法 事件的更多相关文章
- jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
- jQuery 第五章 实例方法 详解动画之animate()方法
.animate() .stop() .finish() ------------------------------------------------------------------- ...
- jQuery_第五章_事件和动画
Jquery中的事件与动画 一.window.onload和$(document).read()的细微差别 (1)执行时机 window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览 ...
- jquery 第五章 jQuery操作表单与表格
1.回顾 对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件 ...
- 【WPF学习】第十五章 WPF事件
前两章学习了WPF事件的工作原理,现在分析一下在代码中可以处理的各类事件.尽管每个元素都提供了许多事件,但最重要的事件通常包括以下5类: 生命周期事件:在元素被初始化.加载或卸载时发生这些事件. 鼠标 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- jQuery第五章
jQuery对表单.表格的操作以及更多应用 一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method ...
- jQuery 第六章 实例方法 动画
.show() .hide() .toggle() .fadeIn() .fadeout() .fadeToggle() .fadeTo() .slideDown() .slideUp() .slid ...
随机推荐
- 6个冷门但实用的pandas知识点
1 简介 pandas作为开展数据分析的利器,蕴含了与数据处理相关的丰富多样的API,使得我们可以灵活方便地对数据进行各种加工,但很多pandas中的实用方法其实大部分人都是不知道的,今天就来给大家介 ...
- JUC---05线程间通信（一）
一.普通的线程间通信 1.synchronized实现 package com.jenne.mydemo; class ShareDataOne { private int number = 0; p ...
- C语言程序设计之 数组2020-10-28
C语言程序设计之 数组2020-10-28 整理: 第一题:求最小数与第一个数交换 [问题描述] 输入一个正整数n (1<n<=100),再输入n个整数,将最小值与第一个数交换,然后输 ...
- kube-proxy实现原理
1.service概念 service是一组pod的服务抽象,相当于一组pod的LB,负责将请求分发给对应的pod.service会为这个LB提供一个IP,一般称为cluster IP.kube-pr ...
- linux用户及组相关文件介绍
用户和组文件介绍 1.用户账号文件:passwd passwd命令用于设置用户的认证信息,包括用户密码.密码过期时间等.系统管理者则能用它管理系统用户的密码.只有管理者可以指定用户名称,一般用户只能变 ...
- python机器学习识别手写数字
手写数字识别 关注公众号"轻松学编程"了解更多. 导包 import numpy as np import matplotlib.pyplot as plt %matplotlib ...
- Java中的（String args[]）
1. DOS下运行 首先,String args[] 这个形式可以直接看出它就是一个字符串数组充当main函数形式参数,args是arguments的缩写,不是关键字(就是一个数组名),可以改但没必要 ...
- Netcore中简单使用MemoryCache
用到缓存架构,我们一般都会想到的Redis,因为它支持分布式,高可用,速率非常快.MemoryCache则相对较少提到,但是对于单体项目或者小型项目,memorycache还是是不错的选择.Memor ...
- C++ 设计模式 4：行为型模式
0 行为型模式 类或对象怎样交互以及怎样分配职责,这些设计模式特别关注对象之间的通信. 1 模板模式 模板模式(Template Pattern)定义:一个抽象类公开定义了执行它的方法的方式/模板.它 ...
- 内网渗透 day9-免杀基础
免杀1 目录 1. 会话提升的几种方式 1 2. armitage的熟悉 2 3. handler生成监听器的方法 6 4. 防止会话假死 6 5. 控制台设置编码 7 6. upx加壳 7 7. m ...