事件

事件的相关概念：

事件的三要素：事件元素、事件类型、事件对象；
事件对象的使用，必须有事件的产生；
为什么要用事件对象：事件对象包含相关事件的属性值；

事件对象的兼容写法：

  1. document.onclick = function(evt){
  2.     var e = evt || event;
  3.     console.log(e);
  4. }

鼠标事件对象：

（1）pageX / pageY 相对于整个文档左顶点的坐标（常用）；
（2）clientX / clientY 相对于可视窗口左顶点的坐标 ；
（3）offsetX /offsetY 相对于距离自己最近的元素左顶点的坐标（常用于拖拽）；
小老虎跳一跳案例：见第十一天代码
小老虎跟随鼠标移动案例：见第十一天代码

  1. document.onclick = function(evt){
  2.     var e = evt || event;
  4.     console.log("page:"+e.pageX+","+e.pageY);  //page:强调的是整个页面的坐标  通常用这个
  5.     console.log("client:"+e.clientX+","+e.clientY);  //client:强调可视窗口的坐标
  6.     console.log("offset:"+e.offsetX+","+e.offsetY);  //offset:针对于距离自己最近的父元素左顶点的坐标，常用于拖拽
  7. }  h

键盘事件对象：

1、键盘事件目前的事件源都是document；
（1）onkeyup：键盘弹起的那一刻触发事件；
（2）onkeydown：键盘按下的那一刻触发事件；
（3）onkeypress：键盘按下产生一个字符后触发事件；（按功能键是不会触发的）
2、获取按下的键盘对应字符的ASCII码（兼容写法）：
var key = e.keyCode || e.charCode || e.which;
3、ctrl + 回车 返回10；
4、判断ctrl是否被按下，返回布尔值：console.log(e.ctrlKey);

  1. document.onkeypress = function(evt){
  2.     var e = evt || event; 
  3.     var key = e.keyCode || e.charCode || e.which; 
  4.     console.log(key);  //按下键盘字符返回对应的ASCII码
  5.     console.log(String.fromCharCode(key));  //将ASCII码转为字符
  6.     console.log(e.ctrlKey);  //按了ctrl返回true，不按ctrl返回false
  7. }

事件流：

当某个事件执行时，从子元素向父元素触发或从父元素向子元素触发，称为事件流；

事件 - 图1

  1. <style>
  2.     #box1{
  3.         width: 200px;
  4.         height: 200px;
  5.         border: 1px solid red;
  6.     }
  8.     #box2{
  9.         width: 100px;
  10.         height: 100px;
  11.         border: 1px solid red;
  12.     }
  13. </style>
  15. <body>
  16.     <div id="box1">
  17.         <div id="box2"></div>
  18.     </div>
  19. </body>
  21. <script>
  22.     var oBox1 = document.querySelector("#box1");
  23.     var oBox2 = document.querySelector("#box2");
  25.     oBox2.onclick = function(){
  26.         alert("oBox2");
  27.     }
  29.     oBox1.onclick = function(){
  30.         alert("oBox1");
  31.     }
  33.     document.body.onclick = function(){
  34.         alert("body");
  35.     }
  37.     document.onclick = function(){
  38.         alert("document");
  39.     }
  41.     window.onclick = function(){
  42.         alert("window");
  43.     }
  44. </script>  //最终效果为：点击一下oBox2，会弹出oBox2、oBox1、body、document、window（由于事件流）

阻止事件冒泡（兼容写法）

e.stopPropagation?e.stopPropagation() ：e.cancelBubble = true;
阻止事件冒泡案例：见代码第十一天

阻止浏览器默认行为（兼容写法）

e.preventDefault?e.preventDefault():e.returnValue = false;
或者return false; （用这种写法需写到函数的最后一行，因为遇到return会跳出函数）

  1. <body>
  2.     <a href="http://www.baidu.com">跳转</a>
  3. </body>
  5. var oA = document.querySelector("a");
  7. oA.onclick = function(evt){
  8.     console.log("heihei");
  9.     var e = evt || event;
  10.     return false;     //阻止a链接默认点击就跳转的行为    
  11. }
  1. document.oncontextmenu = function(){
  2.     console.log("haha");
  3.     return false;  //阻止鼠标右击的默认行为
  4. }

事件监听

1、通过HTML元素绑定：

  1. <body>
  2.     <button type="button" onclick="fun()">点击</button>
  3. </body>
  5. <script>
  6.     var fun = function(){
  7.         console.log("heihei");
  8.     }
  9. </script>

2、通过JS的方式绑定：

  1. <body>
  2.     <button type="button">点击</button>
  3. </body>
  5. <script>
  6.     var oBtn = document.querySelector("button");
  7.     oBtn.onclick = function(){
  8.         console.log("haha");
  9.     }
  10. </script>

3、事件监听：
（1）事件监听的好处:
① 允许为同一个元素多次绑定相同的事件；
② 可以决定当前的事件流传递是冒泡还是捕获；
（2）事件监听的语法： 默认不写参数为false,就是冒泡
Dom对象.addEventListener(去掉on的事件,回调函数,[是否捕获]);

  1. document.addEventListener("click",function(){
  2.     alert(1);
  3. });
  4. document.addEventListener("click",function(){
  5.     alert(2);
  6. });  //点击一下document，会弹出1、2（好处1）
  1. document.addEventListener("click",function(){
  2.     alert("document");
  3. },true);
  4. window.addEventListener("click",function(){
  5.     alert("window");
  6. },true);  //true为捕获，点击一下，会弹出window，document（好处2）

事件委托：

事件委托：某个事件让其他元素来完成；
例如：页面上有1000个li，为每一个li添加单机事件，使用委托只需要在li父级上加一次事件就可以；
委托的机制就是通过冒泡传递流，通过父元素实现子元素的功能；
事件委托的好处：
（1）可以为大量相同的子元素添加事件委托，将事件绑定在其父元素上，提高程序的执行效率；

  1. //用事件委托实现点击li出现高亮效果
  2. <body>
  3.     <ul>
  4.         <li>1</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.         <li>4</li>
  8.         <li>5</li>
  9.     </ul>
  10. </body>
  13. <script>
  14.     var oUl = document.querySelector("ul");
  16.     oUl.onclick = function(evt){
  17.         var e = evt || event;
  18.         var target = e.target || e.srcElement;   //获取真实的操作源
  19.         if (target.tagName == "LI"){  //LI 是大写
  20.             target.style.backgroundColor = "yellow";
  21.         }
  22.     }
  23. </script>

使用事件委托就要获取真实的操作源：（兼容写法）
var target = e.target || e.srcElement;
（2）可以为未来添加的子元素提前绑定事件；

  1. <body>
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.         <li>4</li>
  7.         <li>5</li>
  8.     </ul>
  9.     <button type="button">添加</button>
  10. </body>
  12. <script type="text/javascript">
  13.     var oUl = document.querySelector("ul");
  14.     var oBtn = document.querySelector("button");
  16.     oUl.onmouseover = function(evt){  //鼠标移入li,变高亮
  17.         var e = evt || event;
  18.         var target = e.target || e.srcElement;
  20.         if(target.tagName == "LI"){
  21.             target.style.backgroundColor = "yellow";
  22.         }
  23.     }
  25.     oUl.onmouseout = function(evt){  //鼠标移出li,颜色消失
  26.         var e = evt || event;
  27.         var target = e.target || e.srcElement;
  29.         if(target.tagName == "LI"){
  30.             target.style.backgroundColor = "";
  31.         }
  32.     }
  34.     oBtn.onclick = function(){  //新添加的li也会有上面的效果
  35.         var oLi = document.createElement("li");
  36.         oLi.innerHTML = "heihei";
  37.         oUl.appendChild(oLi);
  38.     }
  39. </script>

三、事件拖拽案例：见第十二天代码（重要）
可视窗口的高：innerHeight ，返回的是数字；
可视窗口的宽：innerWidth ，返回的是数字；
四、json：见day7 01-json对象