1、行间的绑定

• <div id="box" onclick="事件处理函数"></div>
• 特点：方便
• 缺点：不方便维护，不方便封装

2、DOM对象属性的形式绑定

• ele.onclick = function(){}
• 特点：js跟html完全分离，便于封装
• 缺点：同一个DOM对象，同时间只能绑定一个同事件，如果给这个事件绑定多个事件处理函数，只执行最后一个事件处理函数

3、事件监听

• ele.addEventListener("事件类型"，"事件处理函数"，bool){}

• 事件类型: 字符串类型 要加引号
  比如说"onclick"
  没有 on 直接写 click

• 事件处理函数：函数类型
  匿名函数、命名函数、对象(可以直接触发对象的方法)

• bool：布尔值（只有true和false）
  可以省略不写，默认为false
  true 此事件会触发事件捕获
  false 此事件会触发事件冒泡

• 特点：
  1、DOM2级 不会跟DOM0级事件冲突，同时存在两个都执行
  2、DOM2级可以绑定多个事件函数，不会起冲突

4、第二种绑定事件的函数，也叫DOM 0级绑定

 box.onclick = function(){
        console.log(1);
 }

5、第三种绑定事件的方式，也叫DOM 2级绑定

//匿名函数的绑定
 box.addEventListener('click',function(){
        console.log(11);
},false)

//命名函数的绑定 
function add(){
        console.log(111);
}
box.addEventListener('click',add,false)
//命名函数再绑定的时候不要带括号
//只要带上括号，就是函数的调用，直接默认执行
//不带括号，是函数的绑定，只有在被事件触发的时候才执行

6、对象中方法的绑定

 var obj = {
        name : "娜娜",
        age : "20",
        say : function(){
            console.log("帅气哥哥");
        },
        handleEvent : function(){
//在对象中可以通过this来使用对象自身的方法和属性
            this.say();
            console.log(this.name);
        }
    }
//如果想通过事件监听(DOM2级)的形式来触发对象中的方法
//则这个方法就必须在键值对为 handleEvent:function(){}这个方法中被调用
box.addEventListener('click',obj,false);

7、DOM 2级事件可以随时取消

• 事件移出通过 removeEventListener
• 写法跟addEventListener类似，也有相同的三个参数
• 只能移除命名函数
• 不能移除匿名函数和DOM 0级事件
• 在事件绑定的时候，推荐使用DOM 2级命名函数的形式来绑定事件

//双击box后 移出 box上的单击事件
  box1.addEventListener('click',function(){
        //先触发双击事件
        //然后移出单击事件
        box.removeEventListener('click',function(){
            console.log("单机事件以及移出");
        })
    },false)

8、jquery 绑定事件

    //jquery 绑定DOM 0级事件
    $('#box').on('click',function(){
        console.log("DOM 0级 单击事件");
    })

    //jquery 绑定DOM 2级事件
    $('#box').click(function(){
        console.log("DOM 2级 单击事件 匿名函数");
    })

    //同样使用 jquery绑定 DOM 2级事件也有命名函数 和匿名函数
    function a(){
        console.log("DOM 2级 单击事件 命名函数");
    }
    $('#box').click(a);

    //绑定一个鼠标双击事件
    $('#box').dblclick(function(){
        console.log("DOM 2级 双击事件");
    })
    //绑定一个鼠标移入事件
    $('#box').mouseover(function(){
        console.log("DOM 2级 鼠标移入事件");
    })

9、jquery DOM 2级 事件的移除

• jquery 事件移除 使用off("事件类型",方法名)方法
• 如果写上方法名，就会移除指定的方法 $('#box').off('click',a);
• 如果不写方法名，会将这个事件类型全部移除，包括DOM 0级 以及 匿名函数 $('#box').off('click');
• 如果不写方法名，也不写事件类型，移出绑定在DOM上的所有事件，包括DOM 0级事件
  $('#box').off();

10、jQuery的事件绑定

• 当绑定事件写在按钮外面的时候，事件不生效
• 因为绑定的时候 还没有生成子元素，按钮被点击后才会生效
• 一般情况下，给当前不存在的标签是无法绑定点击事件的
• 标签只有渲染到页面后，我们才能通过代码获取到并绑定点击事件的
• 在实际的项目中，很多情况下，我们需要在标签被创建前就将事件绑定好
  这个时候我们可以使用事件委托
  事件委托是给其父元素绑定事件
  但是 让这个事件作用在子元素上

 $('#box').on('click','.item',function(){
        /*
            事件委托只能用DOM 0级来写
            第一个参数 ：事件类型
            第二个参数 ：事件作用的子元素
            第三个参数 ： 绑定的事件函数
        */
        console.log($(this));
})