JS中事件、事件绑定、事件对象、事件冒泡、事件委派、事件传播、常用事件等

一、事件

1、事件

用户与浏览器特定的交互瞬间。

二、事件绑定

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中

1、三种事件绑定

a、在DOM元素中直接绑定；

<button onclick="open()">按钮</button>
 
<script>
function open(){
    alert(1)；
}
</script>

b、在JavaScript代码中绑定；

<button id="btn">按钮</button>
 
document.getElementById('btn').onclick = function(){
      this.style.background = 'yellow';
  }

c、绑定事件监听函数。

用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false 。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

<button id="btn">按钮</button>
 
<script type="text/javascript">
        var oBtn = document.getElementById('btn');
        function addEvent(obj,type,handle){
            try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
                obj.addEventListener(type,handle,false);
            }catch(e){
                try{ // IE8.0及其以下版本
                    obj.attachEvent('on' + type,handle);
                }catch(e){ // 早期浏览器
                    obj['on' + type] = handle;
                }
            }
        }
        addEvent(oBtn,'click',function(){//切记cliclk要加引号，没加会报错
            this.style.width = 200+'px';
        });
</script>

2、三种绑定事件的区别

第一种方式：函数写在结构层里面。非常不好，使页面很混乱，行为与结构得不到分离。并且在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；

第二种方式：行为与结构开始分离。第二种绑定方式中只能给一个时间绑定一个处理函数，在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

第三种方式：可以绑定多次同一个事件，且都会执行

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
 
　　　　<script>
 
　　　　　function clickone(){ alert("hello"); } //执行这个
 
　　　　　function clicktwo(){ alert("world!"); }
 
　　　　</script>
 
　　2. <div id="btn"></div>
 
　　　　<script>
 
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
 
　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
 
　　　　</script>
 
　　3. <div id="btn"></div>
 
　　　　<script>
 
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);
 
　　　　　function clickone(){ alert("hello"); } //先执行
 
　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);
 
　　　　　function clicktwo(){ alert("world"); } //后执行
 
　　　　</script>

3、如何取消事件绑定

第一种方式：document.onclick = null;(针对第一和第二两种绑定方式)

第二种方式：obj.detachEvent(事件名称，事件函数);（针对非标准IE下的绑定方式）

第三种方式：obj.removeEventListener(事件名称，事件函数，是否捕获);（针对标准浏览器下的绑定方式）

三、事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，如：事件的类型、导致事件的元素（当前元素）、以及其它与事件相关的信息。如鼠标操作事件中，包含了鼠标的位置。键盘操作事件中，包含了是否敲击了键盘等。

在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存，所以需要解决事件对象兼容问题，方案如下

           //第一种解决事件对象兼容问题
          /* if(!event){
				event=window.event;
			} */
          //第二种解决事件对象兼容问题
          event = event || window.event;

四、事件冒泡

1、事件冒泡

-所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

-在开发中，大部分的情况，冒泡是有用的，如果不希望发生冒泡事件，可以通过事件对象取消冒泡

2、取消冒泡：

(1).event.stopPropagation()方法[ˌprɒpəˈɡeɪʃn]

这是阻止事件的冒泡方法，不让事件向documen上蔓延

(2).window.event.cancelBubble = true;//停止冒泡

(3).return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件

五、事件委托

事件的委派，指将事件统一绑定给元素的共同的祖先元素，这样当后代上的事件触发时，会一直冒泡到祖先元素

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能，且能够避免对特定的每个节点添加事件监听器（事件委托看起来挺难理解，但是举个生活的例子。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。）

 <body>
    <button id="btn01">增加超链接</button>
    <ul id="u1">
      <li><a href="#" class="link">超链接一</a></li>
      <li><a href="#" class="link">超链接二</a></li>
      <li><a href="#" class="link">超链接三</a></li>
    </ul>
    <script>
      /* 需求：为每个超链接都绑定单击响应函数 */
       window.onload = function () {
         //点击按钮，新建超链接
         var btn01 = document.getElementById("btn01");
         var u1 = document.querySelector("#u1");
         btn01.onclick = function () {
           //新建一个li
           var li = document.createElement("li");
           li.innerHTML = '<a href="#" class="link">新建超链接</a>';
           u1.appendChild(li);
         }; 
         /* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
         而且这些操作只能为已有的超链接设置事件，而新添建的超链接必须重新绑定 */
 
       /*   var allA = document.getElementsByTagName("a");
         console.log(allA);
         for (i = 0; i < allA.length; i++) {
           allA[i].onclick = function () {
             alert("1");
           };
         } */
 
         /* 
             我们希望，只绑定一次事件，即可应用到多个元素上，即使是后添加的a
             可以将其绑定给元素共同的祖先元素
             如果触发事件的对象是我们期望的元素，其他元素不执行
         */
         /* 知识点
             target——event中的target表示的触发事件的对象 */
 
         //为ul绑定单击响应函数
         u1.onclick = function (event) {
           event = event || window.event;
           console.log(event.target);
           if (event.target.className == "link") {
             alert("hi");
           }
         };
       };
     </script>
  </body>

六、事件传播

—微软公司，认为事件应该由内向外传播，事件应该处理冒泡阶段

—网景公司，认为事件应该从外向内传播，也就是事件应该处于捕获阶段

—w3c综合了网景公司和微软公司的方案，将事件传播分为三个阶段

1:捕获阶段

-在捕获阶段时，从最外层的祖先元素，向目标元素进行了事件的捕获，但是默认此时不会触发事件

2:目标阶段

-事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

3:冒泡阶段

-事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

-如果希望在捕获阶段就触发事件，可以将addEventListener（）第三个参数

设置为true，一般情况下，我们不希望在捕获阶段触发事件，所以这个参数一般都是false

七、常用事件

1、表单事件

onblur失焦
onfocus聚焦
onchange 失焦且改变元素内容
oninput 改变元素内容
onsubmit 提交时调用
onreset 重置调用

2、鼠标事件

onclick 单击事件
ondbclick 双击事件
onmouseout 鼠标移出时事件
onmouseover 鼠标移入时触发
onmouseenter 鼠标移入时触发
onmouseleave 鼠标移出时触发
onmousedown 鼠标点下时调用
onmouseup 鼠标抬起时调用
onmousemove 鼠标移动式调用

3、键盘事件

onkeydown 键盘按下
onkeyup 当按键被松开时
onkeypress当按键被按下然后松开时

4、浏览器事件

onscoll 滚动带滚动条的元素时
onresize 当窗口或框架的大小变化时在window或框架上触发
onreset当用户点击重置按钮在元素上触发