WAPls-NO.2

**

注册事件

给元素添加事件，称为注册事件。
注册事件的方式有两种，传统方式和方法监听注册方式

传统方式
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的函数会覆盖之前设置的函数。

  var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }

方法监听注册方式
addEventListener();
特点：同一个元素同一个事件可以注册多个监听器。按照监听顺序执行

var btns = document.querySelectorAll('button');
 btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })

addEventListenter 事件监听方式
eventTarget.addEventListenter(type,listener[,useCapture])

eventTanrgent.addEventListenter()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收参数的三个方法：

type：事件类型字符串，比如click,mouseover，注意这里不要带on

listener:事件处理函数，事件发生时，会调用该监听函数。

useCapture:可选函数，是一个布尔值，默认是false。

attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn,callback)
eventTarget.attachEvent（）方法将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收参数的两个方法:
eventNameWithOn:事件字符串 比如onclick 这里需要带on

callback：事件处理函数，当目标触发事件时回调函数被调用

删除事件

传统方式删除事件

 divs[0].onclick = null;

removeEventListener 删除事件

divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

detachEvent

divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

事件对象的常见属性和方法

阻止冒泡事件的两种方式
e.stopPropagation();
e.cancelBubble = true;
由于浏览器的兼容问题，我们通常要加一个if判断，来更好的阻止冒泡的发生。
阻止冒泡事件的方式是不会继承的，谁需要冒泡给谁加冒泡；

if（a&&e.stopPropagation）{
        e.stopPropagation;
}else{
   window.event.cancelBubble=true;
}

常见的鼠标对象事件
contextmenu 禁用右键菜单

document.addEventListener('contextmenu', function(e) {
                e.preventDefault();

selectstart 禁止选中文字

document.addEventListener('selectstart', function(e) {
            e.preventDefault();

mousemove 鼠标跟随事件

 var img = document.querySelector('img');
    document.addEventListener('mousemove',function(e){
        var x =e.pageX ;
        var y =e.pageY;
        console.log(x,y)
        img.style.left =x - 50 + 'px';
        img.style.top =y - 40 + 'px';