• e.target 和 this 的区别以及键盘事件的应用

    1）e.target 和 this 的区别：

     e.target 返回的是触发事件的对象（元素）  this  返回的是绑定事件的对象（元素）

    通俗的说就是：e.target 点击了哪个元素，就返回那个元素  
                             this 是哪个元素绑定了这个点击事件，那么就返回谁

    1. var div = document.querySelector('div');
    2. 			div.addEventListener('click',function(e){
    3. 				console.log(e.target);
    4. 				console.log(this)
    5. 			});
    6. 			
    7. 			
    8. 			var ul = document.querySelector('ul');
    9. 			ul.addEventListener('click',function(e){
    10. 				//我们给ul绑定了事件   那么this指向的就是绑定事件的对象ul
    11. 				console.log(this);
    12. 				console.log(e.currentTarget) // 这个存在兼容性的问题
    13. 				// e.target指向的是我们点击的那个对象，谁触发这个事件， 我们点击的是li  e.target  指向的就是li
    14. 				console.log(e.target);
    15. 			})
    16. 			
    17. 			
    18. 			// 处理兼容性问题  只是作为一个了解就可以
    19. 			div.onclick =function(e){
    20. 				e= e ||window.event;
    21. 				var target = e.target || e.srcElement;
    22. 				console.log(target);
    23. 			}

    2）事件委托

    事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

      • 			<li>知否知否，点我应有弹框在手li>
      • 			<li>知否知否，点我应有弹框在手li>
      • 			<li>知否知否，点我应有弹框在手li>
      • 			<li>知否知否，点我应有弹框在手li>
      • 			<li>知否知否，点我应有弹框在手li>
      • 			<li>知否知否，点我应有弹框在手li>
      •
  • <script>
  • //事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
  • var ul = document.querySelector('ul');
  • ul . addEventListener('click',function(e){
  • // alert('知否知否，点我应有弹框在手');
  • // e.target 得到的是当前用户点击的元素，然后返回当前用户点击的对象
  • // 通过排他思想当我们点击每个li的时候，让我们点击的li背景色进行变化，其他的li保持原有背景色不变
  • for (var i=0;ichildren.length ; i++){
  • ul.children[i].style.backgroundColor = '';
  • }
  • // 2）然后才让当前的背景颜色为pink颜色
  • e.target.style.backgroundColor = 'pink'
  • })
  • script>

    • 3）鼠标事件对象

            1)    client    鼠标在可视区 里面点击时所获取到的x和y坐标

            2） page 鼠标在页面文档的x和y坐标(随滚动条滚动而改变)

            3）screen 鼠标在电脑屏幕的x和y坐标

            4）offset 鼠标相对于被绑定事件的元素的x和y的坐标

    1. "../2 事件和样式/image/3.webp" alt="">
    2. 		
    3. 		<script>
    4. 			
    5. 			// 鼠标事件对象mouseEvent   不会随着滚动条变化，只会根据可视区进行获取鼠标的位置
    6. 			document.addEventListener('click',function(e){
    7. 				// 1)client    鼠标在可视区 里面点击时所获取到的x和y坐标
    8. 				console.log(e.clientX,e.clientY);
    9. 				// 这里打印输出的就是鼠标点击可视区之后获取到的x轴和y轴的坐标（但是这个不会因为滚动条的影响，所导致鼠标在可视区的位置发生变化
    10. 				// clientY和pageY 的主要区别是：clientY是主要获取鼠标在可视区当中的y的坐标，pageY获取到的是鼠标距离文档最上方的位置
    11. 				
    12. 				// 2）page 鼠标在页面文档的x和y坐标(随滚动条滚动而改变)(ie9以上的版本使用，但是现在不考虑兼容性的问题，所以主要使用的还是page)
    13. 				console.log(e.pageX,e.pageY);
    14. 				//这里打印输出的也是鼠标点击之后获取到的x轴和y轴的坐标 （但是这个会跟随滚动条的滚动，获取，获取到的数值是随着滚动的变化获取的
    15. 				
    16. 				// 3）screen 鼠标在电脑屏幕的x和y坐标
    17. 				console.log(e.screenX,e.screenY);
    18. 				//这里打印输出的是鼠标相对于显示器屏幕左上角x轴的坐标和	鼠标相对于显示器屏幕左上角y轴的坐标；
    19. 				// 4）offset 鼠标相对于被绑定事件的元素的x和y的坐标
    20. 				console.log(e.offsetX,e.offsetY);
    21.  
    22. 				// offsetX 鼠标相对于被绑定事件的元素左上角X轴的坐标；
    23. 				// offsetY 鼠标相对于被绑定事件的元素左上角Y轴的坐标;
    24. 			})
    25. 			
    26. 		script>

    案例：跟随鼠标的天使 这个在京东放大图片当中黄色鼠标跟随区域运用的就是这种思想，需要掌握这种思想和解题思路 

    案例分析： 1）鼠标不断地移动，使用鼠标移动事件 mousemove  
                        2）在页面中移动，给document 注册事件  
                        3）图片要移动距离，而且不占位置，我们需要使用绝对定位  
                        4）核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片  

    4）键盘事件

            1.keypress  键盘按下时触发  键盘按下就一直会触发  不能识别crtl shift等功能键 方向键

            2.keydown   键盘按下时触发  键盘按下就一直会触发   所有键都能识别

            3.keyup  键盘弹起来时触发  keyup是能识别crtl shift等功能键 方向键

    1. // 1.keypress  键盘按下时触发  键盘按下就一直会触发  不能识别crtl shift等功能键 方向键
    2. 			document.addEventListener("keypress", function() {
    3. 				console.log("键盘按下时触发,不能识别crtl shift等功能键 方向键")
    4. 			})
    5.  
    6.  
    7. 			// // 2.keydown   键盘按下时触发  键盘按下就一直会触发   所有键都能识别
    8. 			document.addEventListener("keydown", function() {
    9. 				console.log("键盘按下时触发")
    10. 			})
    11. 			
    12. 			
    13. 			// // 3.keyup  键盘弹起来时触发  keyup是能识别crtl shift等功能键 方向键
    14. 			document.addEventListener("keyup", function() {
    15. 				console.log("键盘弹起来")
    16. 			})

    三个键的执行顺序                keydown->keypress->keyup

    5）键盘事件对象

    1.键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

            1)我们的 keyup 和  keydown  事件是不区分字母的大小写  a和A得到的都是65
            2）我们的 keypress  事件是区分字母的大小写
            3）三个键的执行顺序  keydown->keypress->keyup

    1. document.addEventListener('keyup',function(e){
    2. 				console.log('up输出的值'+e.keyCode);
    3. 				
    4. 				
    5. 				// 我们可以利用 keyup 返回的ASCII码值来判断用户按下了哪一个按键
    6. 				if(keyCode === 65 ){
    7. 					alert('你按下的是a键');
    8. 				}else{
    9. 					alert('你没有按下的是a键');
    10. 				}	
    11. 			})

    案例 模拟京东按键输入内容  当我们按下s键的时候，光标自动定位到输入框当中

    核心思路：1）检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面
                      2）使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
                      3）搜索框获得焦点 ：使用js里面的focus() 方法

    1. "text">
    2. 		<script>
    3. 			var search = document.querySelector('input');
    4. 			// keydown是按钮按下是触发，但是当用户按下时间过长，就会导致字符也会输入到文本框当中
    5. 			// keyup  当键盘弹起的时候触发，不会出现字符输入到文本框当中
    6. 			document.addEventListener('keyup',function(e){
    7. 				// console.log(e.keyCode)
    8. 				//可以通过打印按钮的ASCII码值得到需要的值
    9. 				
    10. 				if(e.keyCode === 83){
    11. 					search.focus();
    12. 					//但按钮按下s键并且弹起的时候，输入框获得焦点
    13. 				}
    14. 			})
    15. 		script>

    模拟京东快递单号查询
            要求：当我们在文本框中输入内容的时候，文本框上面显示的字符比用户输入的字符自号大一些

    案例分析：1）快递单号输入内容的时候，上面的大号字体盒子显示（这里面显示的字体更大）
                      2）表单检测用户输入；给表单添加键盘事件
                      3）同时把快递单号里面的值（value)获取过来赋值给上面的盒子（innerHtml）作为内容
                      4)如果快递单号里面的内容为空，则隐藏大号字体盒子
          注意：5）keydown 和 keypress 在文本框里面的特点：他们两个时间触发的时候，文字还没有落入到文本框当中
                       6）keyup事件触发的时候 ，文字已经落入到文本框当中   综合考虑keyup键才是最符合条件的
                       7）当我们失去焦点的时候，就隐藏这个盒子 
                       8）当我们获得焦点，并且文本框内容不为空，就显示这个盒子

    1. class="search">
    2. 			<div class="con">123div>
    3. 			<input type="text" placeholder="请输入您的快递单号" class="jd">
    4. 		div>
    5.  
    6.  
    7.