JavaScript事件对象总结

JavaScript事件对象总结
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：黄富滔
撰写时间：2020年4月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知识点罗列
1、事件简介
      事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
        - JavaScript 与 HTML 之间的交互是通过事件实现的。
个人理解：就是访问HTML页面的用户引起的一系列操作，用户执行了某些操作后，接着对应的代码就被触发了，从而出现提示框等等。
2、文档的加载
  ①无论我们写JS代码是内部样式还是外部样式，我们都应该是写在html页面的下边。因为浏览器加载一个页面的时候自上到下的，读取一行就加载一行，所以写在下边，是确保页面完全加载后，再去触发相关的事件。
②JavaScript加载事件（window.onload）在页面上只能出现一次，如果出现多次，后面的会把前面的覆盖掉。但是在jQuery加载事件（$(document).ready()）在页面上可以出现多个页面加载事件，并且后面的不会把前面的代码覆盖。
3、事件对象
①事件对象简介
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下，鼠标滚轮滚动的方向
②浏览器兼容问题
在IE浏览器中，在IE8以下的浏览器中是将事件对象作为window的属性进行保存的
其他浏览器和IE8以上的浏览器中，响应函数被触发时，浏览器不会传递事件对象。
所以需要对事件对象进行一个兼容  event=window.event||event;
4、事件对象的属性：
鼠标 / 键盘属性
        属性 描述 
        altKey 返回当事件被触发时，"ALT" 是否被按下。 
        button 返回当事件被触发时，哪个鼠标按钮被点击。 
        clientX 返回当事件被触发时，鼠标指针的水平坐标。 
        clientY 返回当事件被触发时，鼠标指针的垂直坐标。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 
        screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 
        ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 
        metaKey 返回当事件被触发时，"meta" 键是否被按下。 
        relatedTarget 返回与事件的目标节点相关的节点。 
        shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
5、一些比较常用的事件
鼠标事件
   ①onclick         单击事件
   ②ondblclick      双击事件
   ③onmousedown     当鼠标按下时运行脚本
   ④onmouseup       当鼠标松开时运行脚本
   ⑤onmousemove     当鼠标移动时运行脚本
   ⑥onmouseover      当鼠标移动到元素上运行脚本
   ⑦onmousewheel    当鼠标滚轮滚动时运行脚本

键盘事件(一般都会绑定给一些可以获取焦点的对象或则是document)
①onkeydown: 键盘被按下事件
②onkeyup: 键盘被松开的事件
③keyCode：可以获取键盘的编码，按下不同的按键时，会有不同的编码
④altKey ：alt如果被按下了则返回true，否则返回false
⑤ctrlKey:ctrl如果被按下了则返回true，否则返回false
⑥shiftKey:shift如果被按下了则返回true，否则返回false

6、事件的委派
①简介
什么是事件委派？当我们为已有的标签添加一个点击事件可以的，但是新创建的标签中，却无法响应到该点击事件。当我们想为新创建的标签有添加一个点击事件的时候，则需要为新添加的超链接需要重新绑定。所以事件委派就是用更少的代码量去解决这个问题的，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素
②事件委派的用法
    - 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。比如我们想为无论是已有的还是新创建的li标签添加点击事件，我们只需为li的共同祖先ul标签绑定点击事件
     - 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
 -事件对象的属性target：返回触发此事件的元素(事件的目标节点)，简单点说就是点那个元素，那个元素就会被触发

7、事件的绑定
使用 对象.事件=函数形式绑定事件
它只能同时为同一个元素绑定同一事件一次，不能绑定多次，如果绑定多次，后面的会覆盖掉前面的
例如： btn.οnclick=function(){alert(1)}; btn.οnclick=function(){alert(2)};最后第二个点击事件会被触发
解决办法：
①IE8以上的浏览器和其他浏览器
方法：  addEventListener(事件,回调函数,布尔值) 【需要传入三个参数】
    参数一： 字符串形式的事件，不加on，例如 点击事件用  "click"  表示  
参数二： 回调函数 function(){这里写要执行的代码};
参数三：是否在捕获阶段触发事件，一般都传false。（true表示在捕获阶段触发事件，false反之）。
②IE8级IE8以下的浏览器
方法：attachEvent(事件,回调函数)  【需要传入两个参数】
    参数一：  字符串形式的事件，加on，例如 点击事件用  "onclick"  表示  
参数二： 回调函数 function(){这里写要执行的代码};

   注意 ：addEventListener()中的this，是绑定事件的对象
          attachEvent()中的this，是window
            需要统一两个方法的this
 考虑到浏览器兼容问题，所以我们用一个函数对其进行封装，判断浏览器该用addEventListener还是用attachEvent方法
代码：// 函数中相当于传入三个形参
var btn=document.getElementById("btn");
  function Event(eventobj,event,callback){
 if(eventobj.addEventListener){
eventobj.addEventListener(event,callback,false);
}else{
Eventobj.attachEvent("on"+event,callback);
callback.call(eventobj);
}
}
//函数的调用 ，调用时写入实参
bind(btn,"click",function(){alert(2);});
说明：Eventobj.attachEvent("on"+事件,回调函数)中，"on"是以字符串的形式写入的，所以在调用函数的时候不需要再以bind(btn,"onclick",function(){alert(2);});进行调用，而是bind(btn,"click",function(){alert(2);});

8、JavaScript事件冒泡（Bubble）
    - 所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
    - 在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true
   -只需在后代元素内被触发之前加入代码event.cancelBubble=true。如果有多个后代元素，但是我们不希望它们的最大的祖先元素也触发相同事件的时候，我们要在所有的后代元素上加上那句代码。

9、事件的捕获和事件取消捕获（setCapture()方法和releaseCapture()方法）
   -该方法可以说支持IE浏览器（只会捕获一次），在谷歌上面调用该方会报错，在火狐上面虽然不报错，但是不会触发该方法
  -在IE上，如果调用了该方法，无论你点击了那里，都会进行一次事件的捕获
语法：事件捕获    事件对象.setCapture();
      取消捕获    事件对象.releaseCapture();
    

10、事件的传播
- W3C综合了微软公司和网景公司的方案，将事件传播分成了三个阶段
     ①.捕获阶段
         - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    ②.目标阶段
        - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    ③.冒泡阶段
        - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

    - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
             一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
     - IE8及以下的浏览器中没有捕获阶段