DOM-----注册事件(绑定事件)

一.DOM 是什么?

文档对象模型(Document Object Mobel  简称DOM),是W3C组织推荐的处理可扩展标记语言

通过这些DOM接口可以改变网页的内容,结构和样式

1.对于javascript,为了能够是javascript操作html.javascript就有了一套自己的dom编程接口

2.对于HTML,dom使得html形成一颗dom树,包含文档,节点,元素

二.什么是注册事件?

给元素添加事件,称为注册事件或绑定事件

三.注册事件有两种方式:

传统方法和方法监听事件

传统注册方法:

利用on开头的事件onclick

<button onclick="alert('hello world')"></button>

btn.onclick=function(){}

特点:注册事件的唯一性

注意:

同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

方法监听事件 :

w3c标准

addEventListener()是一个方法

ie9之前不支持这个方法,可以使用attachEvent()代替

特点:同一个方法 可以注册多个监听器

addEventListener事件监听方式

dom对象.addEventListener(type,listener [usecapture])

dom对象.addEventListener ()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数︰
type:事件类型字符串，比如click、mouseover ，注意这里不要带on

listener:事件处理函数，事件发生时，会调用该监听函数
useCapture : 布尔值 事件流的类型  默认false事件冒泡流  如为true，则是事件捕获流

    ie10及以下版本
        dom对象.attachEvent(参数1，参数2)

添加监听事件
            参数1：事件   on+事件名
            参数2：函数  事件触发后调用的函数

注册事件兼容性解决方案

    function addEventListener(element, eventName, fn) {
        //判断当前浏览器是否支持addEventListener方法
        if (e1ement.addEventListener) {

            element.addEventListener(eventName， fn);
              //第三个参数默认是false
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, fn);
        } else i
        //相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
    //兼容性处理的原则: 首先照顾大多数浏览器， 再处理特殊浏览器

删除事件(解绑事件)

dom对象.removeEventListener(参数1，参数2，参数3)

删除监听事件
            参数1：事件名   不带on
            参数2：函数  事件触发后调用函数
            参数3：布尔值 事件流的类型  默认false事件冒泡流  如为true，则是事件捕获流

ie的

        dom对象.detachEvent(参数1，参数2)

删除监听事件
            参数1：事件   on+事件名
            参数2：函数  事件触发后调用的函数