JS中的事件(对象，冒泡，委托，绑定)

- 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间，JS与HTML之间的交互是通过事件实现的

对于web应用来说，有下面这些代表性事件：点击事件，鼠标移动，按下键盘等等

- 事件，是用户和浏览器之间的交互行为

我们可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码会执行

文档的加载：

浏览器在加载一个页面时，是按照自上而下的顺序加载的，

读取到一行就运行一行，在代码执行时，页面还没有加载

将js代码编写到页面的下面，确保页面加载完毕以后再执行js代码

window.onload 确保页面加载完成以后执行，可以保证代码执行时所有DOM对象已经加载完毕了

clientWidth／clientHeight：

- 可以获取元素的可见宽度和高度

- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算

- 会获取元素宽度和高度，包括内容区和那边距

- 这些属性都是只读的，不能修改

事件对象：

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实參传递进响应函数

在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下

 <div id="areaDiv">
 </div>
 <br>
 <br>
 <div id="showMsg">
 </div>
 <script>
  /**
   * 当鼠标在areaDiv中移动时，在showMsg来显示鼠标的坐标
   onmousemove
   - 该事件将会在鼠标在元素中移动时被触发
   */
   var area=document.getElementById('areaDiv')
   var show=document.getElementById('showMsg')
if(!event){
event=window.event}//event=event||window.event
   area.onmousemove=function(event){
/**
 * clientX可以获取鼠标指针的水平坐标
 clientY可以获取鼠标的垂直坐标,在ie8中不兼容
 */
 show.innerHTML='x='+event.clientX+',Y='+event.clientY
   }
 </script>

⚠️：

在ie8中，响应函数被触发时，浏览器不会传递事件对象

在ie8及以下的浏览器中，是将事件对象作为window对象的属性保存的

事件冒泡：

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

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

  <div id="box1">
        我是box1
        <span id='s1'>我是span</span>
    </div>
    <script>
    var s1=document.getElementById('s1');
    var box1=document.getElementById('box1');
    s1.onclick=function(event){
        event=event||window.event
        alert('s1 here')
        event.cancelBubble=true
    }
    box1.onclick=function(){
        event=event||window.event
        alert('box1 here')
        event.cancelBubble=true//取消冒泡
    }
    document.body.onclick=function(){
        alert('body here')
    }
    </script>

事件的委派：

- 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

  <button id="btn">添加超链接</button>
  <ul id="ul">
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
  </ul>
    <script>
 
   var ul=document.getElementById('ul')
        var btn=document.getElementById('btn')
        btn.onclick=function(){
            var li=document.createElement('li');
            li.innerHTML="<a <li><a href='javascript:;' class='link'>超链接</a></li>"
       ul.appendChild(li)
        }
    /**
     *为每个超链接都绑定一个单击响应函数
     这些操作只能为已经有的超链接设置事件，为新添加的超链接必须重新绑定
     */
 /**
  * var allA=document.getElementsByTagName('a');
   for(var i=0;i<allA.length;i++){
       allA[i].onclick=function(){
           alert('我是a')
       }
   }
  */
   /**
    * 我们希望，只绑定一次事件，即可应用到所有元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同祖先元素
    */
    //为ul绑定一个单击响应函数
ul.onclick=function(event){
    event=event||window.event
    //如果触发事件的对象是我们期望的对象，则执行否则不执行
    /**
    target
     *event的target表示触发事件的对象
     */
   // alert(event.target)
    if(event.target.className=='link')
    {
        alert('我是a')
    }
}

事件的绑定：

使用：

- 对象.事件=函数形式绑定响应函数，它只能同时为一个元素的一个事件绑定响应函数，不能绑定多个，如果绑定了多个，则后边的会覆盖前边的

 - addEventListener() 通过这个方法也可以为元素绑定响应函数

    -参数：

       - 事件的字符串，不要on

       -  回调函数，当事件触发时该函数会被调用

       -  是否在捕获阶段触发事件，需要一个布尔值，一般都传false

⚠️：

- addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，会按照函数的绑定顺序执行(ie8及以下浏览器不支持

- 绑定的事件对象

<button id="btn">click</button>
var btn=document.getElementById('btn')
  btn.addEventListener("click",function(){
alert(1)
  },false)
  btn.addEventListener("click",function(){
alert(2)
  },false)

attachEvent（）

- 在ie8中可以使用attachEvent（）来绑定事件

- 参数：

       - 事件的字符串，要on

       -  回调函数，当事件触发时该函数会被调用

⚠️：

- 后绑定的事件，先执行

- this是window

 

<button id="btn">click</button>
 
var btn=document.getElementById('btn')
 
  btn.attachEvent("onclick",function(){
alert(1)
  },false)
  btn.attachEvent("onclick",function(){
alert(2)
  },false)

定义一个函数，用来为指定元素绑定响应函数

参数：

obj 要绑定的对象

eventStr 事件的字符串（不要on）

callback 事件的回调函数

  var btn=document.getElementById('btn')
function bind(obj,eventStr,callback){
    if(obj.addEventListener){
        //大部分兼容的方式
        obj.addEventListener(eventStr,callback,false)
    }
    else{
        /**
         * this是谁，由调用方式决定
         callback.call(obj)
         */
        //ie8及以下
  //      obj.attachEvent("on"+eventStr,callback)//callback由浏览器调用，this对象指向浏览器，
  //可以把上一句改成：
  obj.attachEvent("on"+eventStr,function(){
      callback.call(obj)//obj传入参数，代替this指向
  })
   }
}
bind(btn,"click",function(){
    alert('hello')
})

事件的传播：

- 关于事件的传播有两种说法：

1.事件是从内往外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该再冒泡阶段执行

2.事件是由外向内传播，也就是先是当前元素的最外层祖先元素触发，然后在向内传递给后代元素

w3c综合了两种说法，将事件分成了3个阶段：

- 捕获阶段

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

- 目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

- 冒泡阶段

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

⚠️：

- 如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true（一般不会有人这么做

- ie8没有捕获阶段