js 注册绑定事件与接触绑定事件

注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式

1. 传统注册方式：

• 利用on开头的事件onclik
• <button οnclick=”alert(hi~)”></button>
• Btn.οnclick=function(){}
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

1. 方法监听注册方式

• W3c标准 推荐方式
• addEventListener()它是一个方法 （移动端）
• IE9之前的IE不支持此方法，可使用attachEvent()代替
• 特点：同一个元素同一个事件可以注册多个监听器（监听处理函数）
• 按注册顺序依次执行

1. addEventListener 事件监听方式

eventTarget.addEventListener(‘type’（一定要加引号）,listener[,useCapture])

eventTarget(监听的对象)

• Type:事件类型字符串，如：click、mouseover,注意这里不带on
• Listener:事件处理函数，事件发生时，会调用该监听函数(function)
• useCapture:可选参数，是一个布尔值，默认是false;

例：  <button>高级事件</button>

    <button>传统事件</button>

    <script>

        // 首先获取元素

        var btn = document.querySelectorAll('button')

        var flag = 0;

        // 获取高级元素

        btn[0].addEventListener('click', function() {

            // alert('喜欢')

            flag += 1;

            // this.disabled = true;

            if (flag == 1) {

                alert('喜欢')

            } else if (flag == 2) {

                alert('喜欢')

            } else {

                this.disabled = true;

            }

        })

1. </script>
2. attachEvent  ie9以前的版本支持

1. 删除事件（解绑事件）

删除事件的方式：

   divs[1].addEventListener('click', fn)

            // 新方法删除

        function fn() {

            alert('你好吗')

            divs[1].removeEventListener('click', fn)

        }

        divs[2].onclick = function() {

            alert("我是小明同学")

                // 传统方式删除

            divs[2].onclick = null;

        }