事件
一.jQuery的位置信息
大致是说在页面中获取盒子的基本信息比如盒子距离页面顶部的长度呀,还有宽度
主要有一下三个方法:
1.获取宽高,设置宽高
<script src="jquery.js"></script> <script> $(function () { //1.获取内容宽和高 // console.log($('.box').width()); 获取盒子的宽 // console.log($('.box').height()); 获取盒子的高 //当2秒之后 让div的盒子的宽度变成400 // delay() 必须要结合动画的方法 重点留意 // $('.box').delay(2000).hide(3000); // setTimeout(function (argument) { // // 设置宽 // $('.box').width(400); // },2000);
2.innerWidth() innerHeight() 内部的宽和高, 包含内容的宽+padding 不包含border
// console.log($('.box').innerWidth());
// $('.box').innerWidth(400);
3.outerWidth() outerHeight() 内部宽和高 包含内容的宽+padding+border 整个盒模型
的大小
// console.log($('.box').outerWidth()); // console.log($('.box').offset().top);
二.回到顶部的写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .fixTop{ position: fixed; bottom: 20px; right: 30px; width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: #000; cursor: pointer; 光标位置是所指的时候的位置 } </style> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div class="fixTop">回到顶部</div> <script src="jquery.js"></script> <script> $(function () { $('.fixTop').click(function(event) { $('html,body').animate({ #自定义动画 'scrollTop':0 #向上滚动的时间为0 },1000) }); }); </script> </body> </html>
三.事件流
概念极为抽象
事件:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标的点击事件,页面的滚轮事件onscroll等等,可以向文档或者文档的元素添加事件侦听器来预订事件.
事件流:
事件流的三个阶段:1.事件捕获阶段 2.处于目标阶段 3.事件冒泡阶段
会按照顺序在控制台打印
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">按钮</button> <script> // document.getElementById('btn').addEventListener('click', function () { // alert(1); // },false); window.onload = function(){ var oBtn = document.getElementById('btn'); //1. document.addEventListener('click',function(){ console.log('document处于事件捕获阶段'); }, true); //2. document.documentElement.addEventListener('click',function(){ console.log('html处于事件捕获阶段'); }, true); //3 document.body.addEventListener('click',function(){ console.log('body处于事件捕获阶段'); }, true); //4. oBtn.addEventListener('click',function(){ console.log('btn处于事件捕获阶段'); }, true); // oBtn.addEventListener('click',function(){ console.log('btn处于事件冒泡阶段'); }, false); //5 document.body.addEventListener('click',function(){ console.log('body处于事件冒泡阶段'); }, false); //6 document.documentElement.addEventListener('click',function(){ console.log('html处于事件冒泡阶段'); }, false); //7. document.addEventListener('click',function(){ console.log('document处于事件冒泡阶段'); }, false); }; </script> </body> </html>
一张图来安排一下冒泡阶段和捕获阶段
这个样的事件应答机制会对我们的页面有什么影响呢?假设你想象你要在一个浮动的盒子上面有一个点击鼠标让盒子隐藏的需求,但是冒泡的过程会让你的页面变成这样的,你点击收起按钮的时候盒子会收起但是你在电子与子盒子绑定的父盒子的时候也会收起 ,在点击页面的body时也收起,那么是不是非常的烦躁呢?这个时候我们就要取冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .father{ width: 300px; height: 300px; background-color:red; } </style> </head> <body> <div class="father"> <button class="child">按钮</button> </div> <script src="jquery.js"></script> <script> $(function () { //默认传过来 一个event $('.child').click(function(event) { console.log('按钮被点击了'); console.log(this); // console.log(event.currentTarget); console.log(event.target); //阻止事件冒泡 // event.stopPropagation() #一般阻止冒泡的方法 }); $('.father').mouseenter(function(event) { console.log(event.type) console.log('父盒子被点击了'); console.log(this); // console.log(event.currentTarget); console.log(event.target); // event.stopPropagation() }); $('body').click(function(event) { console.log(this); // console.log(event.currentTarget); // event.target 如果没有事件冒泡，指的点击的目标对象 console.log(event.target); console.log('body被点击了') }); }) </script> </body> </html>
百度页面中换肤的导航栏中的换肤设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .fu{ position: fixed; top:0; left: 0; width: 100%; height: 320px; background-color: red; display: none; } .up{ cursor: pointer; } </style> </head> <body style="height: 2000px"> <!-- <form action=""></form> --> <a href='http://www.baidu.com' id="changeFu">换肤</a> <div class="fu"> <ul> <li> <a href="javascript:void(0)">女神降临</a> </li> <li> <a href="javascript:void(0)">明星</a> </li> <span class="up">收起</span> </ul> </div> <script src="jquery.js"></script> <script> $(function () { $('#changeFu').click(function(e) { //阻止当前默认的事件 // e.preventDefault(); // //阻止冒泡 // e.stopPropagation(); console.log(111); $('.fu').slideDown(1000); // 相当于即阻止了默认事件 又阻止冒泡 return false; }); $('body,.up').click(function(event) { $('.fu').slideUp(1000); }); $('.fu ul li a').click(function(event) { event.stopPropagation(); $(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue'); }); $('.fu').click(function(event) { return false; }); }); </script> </body> </html> 解决的最大的问题就是在点击收起按钮的时候其他盒子的冒泡影响
四.事件代理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li class="item1"> <a href="javascript:void(0);" id="a">alex</a> </li> <!-- <li>武sir</li> --> </ul> <script src="jquery.js"></script> <script> $(function () { // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 // 第二个参数 表示的是后代的选择器 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 $('ul').on('click','#a',function () { alert(this.innerText); }); // $('ul li').click(function () { // alert(this.innerText); // }); $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>'); }) </script> </body> </html>
五.合成事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>按钮</button> <script src="jquery.js"></script> <script> $(function () { /* $('button').mouseenter(function(event) { }); $('button').mouseleave(function(event) { }); */ $('button').hover(function() { /* Stuff to do when the mouse enters the element */ console.log('进入'); }, function() { /* Stuff to do when the mouse leaves the element */ console.log('离开'); }); }) </script> </body> </html>
六.单双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () {
// 单双击 的时间 间隔 是300ms
// 如果解决 单双击冲突 当做作业
$('button').click(function(event) {
console.log('单机了');
// 定时器 300ms 一次性定时器
});
$('button').dblclick(function(event) {
console.log('双机了');
});
})
</script>
</body>
</html>
七.聚焦和失焦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text"> <script src="jquery.js"></script> <script> //加载页面的时候 获取到焦点 // $('input[type=text]').focus(); // $('input[type=text]').focus(function () { // console.log(1); // }); // $('input[type=text]').keydown(function(event) { // console.log(1); /* console.log(event.keyCode); switch (expression) { case label_1: // statements_1 break; case label_1: // statements_1 break; case label_1: // statements_1 break; case label_1: // statements_1 break; default: // statements_def break; } */ // }); // $('input[type=text]').change(function(event) { // console.log(1111); // }); // $('input[type=text]').select(function(event) { // console.log(1111); // }); </script> </body> </html>
八.表单控件事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 交互 接收不到 后端返回回来的数据--> <div> <input type="text" name="user"> <input type="submit"> </div> <script src="jquery.js"></script> <script> //在公司 中 前后端分离的项目 分工明确 开发效率高 // django 模板引擎 /* $('input[type=submit]').click(function(event) { var userName = $('input[type=text]').val(); //发送ajax交互 $.ajax({ url:`http://127.0.0.1:8800/?user=${userName}`, type:'get', success:function(data){ }, error:function (err) { console.log(err) } }); }); */ /* $('form').submit(function(event) { event.preventDefault(); console.log(1111); // 发送ajax $.ajax({ url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`, type:'get', success:function (data) { console.log(data); }, error:function (err) { console.log(err); } }); }); */ </script> </body> </html>
