事件绑定、响应、捕获、冒泡、阻止

事件的绑定分为：

1、行内式绑定事件

<button onclick="JavaScript:console.log(66666)">btn</button>
<script type="text/javascript">
            function fn (that) {
                var e=window.event
                console.log(1111,that,this)                
            }
            
            // fn()
            //行内方式解绑事件就是把节点的事件属性的值(字符串)换了==>javascript:void(0)
        </script>

2、 属性绑定方式来绑定事件

<button type="button" id="btn2">点我</button>
        <script type="text/javascript">
            var btn2=document.getElementById("btn2")
            btn2.onclick=function(e) {
                console.log(111,this,e,window)
            }
            btn2.onclick=function fn(e) {
                console.log(666,this,e,window)
            }
            console.dir(btn2)//方法会被覆盖，只会执行一个方法
            //一个变量或者一个对象属性只能存一个数据:  一个的意思是 基本数据只能一个值,引用只能一个引用
            //解绑==> btn2.onclick=null
        </script>

 3、监听器的方式绑定事件

<button type="button" id="btn3">点我</button>
<script>
btn3.addEventListener("click",function() {
            //     console.log(1111)
            // })
            function fn() {
                console.log(6666)
            }
            btn3.addEventListener("click",fn,true)
            //true是在事件传递的捕获阶段触发  false是冒泡阶段触发  几乎都是默认冒泡触发
            console.dir(btn3)
            //解绑监听器
            btn3.removeEventListener("click",fn)
            
        </script>

事件的冒泡和捕获：

 e.stopPropagation()//阻止事件向父元素传递

e.cancelBubble=true //兼容ie浏览器

e.stopImmediatePropagation()//阻止同元素的其他监听器(处理程序)执行和向父元素冒泡（不常用）

阻止默认事件：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

例子：阻止a标签默认跳转

//<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
   }else{
        window.event.returnValue == false;
   }
}

事件传递是根据对象的嵌套关系来传递的:一个元素只有一个唯一的父元素,document没有父元素

          当用户点击了界面上的元素:

            1.事件捕获阶段:首先事件会经过硬件... 传给window传给documen==>thtml==>body==>爸爸元素==>儿子元素==>目标元素

            2.事件冒泡阶段:然后从目标元素一次传给硬件

            3.事件传递的过程整个事件链的对象都没有绑定处理程序去处理这个事件,事件就没有程序处理,事件无效

           4.同一个元素一个事件传递的过程中事件只会触发一次