从JavaScript事件高级开始进阶Day11-CSDN博客

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
    var btns = document.querySelectorAll('button');
    //1、传统方式注册事件
    btns[0].onclick = function(){
        alert('hi');
    }
    btns[0].onclick = function(){
        alert('How are you?');
    }//页面中只会显示该弹窗不会显示前一个弹窗

    //2.事件侦听注册事件addEventListener 
    //(1)里面的事件类型是字符串 必定加引号 而且不带on
    //(2)同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click',function() {
        alert(22);
    })
    btns[1].addEventListener('click',function() {
        alert(33);
    })
</script>

1.2addEventListener事件监听方式

eventTarget.addEventListener( type,listener[ ,useCapture] )

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

该方法接受三个参数：

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

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

useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，再进一步学习

1.3attachEvent事件监听方式

eventTarget.attachEvent(eventNameWithOn,callback)

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

该方法接收两个参数：

eventNameWithOn:事件类型字符串，比如onclick、onmouseover，这里要带on

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

注意：IE8及早期版本支持

<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    //3、attacheEvent ie9以前的版本支持
    btns[2].attachEvent('onclick',function(){
        alert(11);
    })
</script>

1.4注册事件兼容性解决方案

function addEventListener(element,eventName,fn){
    //判断当前浏览器是否支持addEventListener方法
    if(element.addEventListener){
        element.addEventListener(eventName,fn);//第三个参数 默认是false
    }else if (element.attachEvent){
        element.attachEvent('on' + eventName,fn);
    }else{
        //相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
}

兼容性处理的原则：首先照顾大多数浏览器，在处理特殊浏览器

2、删除事件（解除事件）

2.1删除事件的方式

2.1.1传统注册方式

eventTarget.onclick = null;

2.1.2方法监听注册方式

（1）eventTarget.removeEventListener(type,Listener[,useCapture]);

（2）eventTarget.detachEvent(eventNameWithOn,callback);

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function(){
        alert(11)
        // 1.传统方式删除事件
        divs[0].onclick = null;
    }
  
    divs[1].addEventListener('click',fn);
    // 2.removeEventListener 删除事件
    //divs[1].addEventListener('click',fn)// 里面的fn 不需要调用加小括号
    function fn(){
        alert(22);
        divs[1].removeEventListener('click',fn);
    }

    divs[2].attachEvent('onclick',fn1);
    function fn1(){
        alert(33);
        divs[2].detachEvent('onclick',fn1);
    }
</script>

2.2删除事件兼容性解决方案

function removeEventListener(element,eventName,fn){
    //判断当前浏览器是否支持removeEventListener方法
    if(element.removeEventListener){
        element.removeEventListener(eventName,fn);//第三个参数 默认是false
    } else if (element.datachEvent){
        element.datachEvent('on' + eventName,fn);
    } else {
        element['on' + eventName] = null;
    }
}

3、DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

（1）捕获阶段

（2）当前目标阶段

（3）冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程，之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

注：

（1）JS代码中只能执行捕获或者冒泡其中的一个阶段

（2）onclick 和 attachEvent(ie) 只能得到冒泡阶段

（3）addEventListener(type, listener[,useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

（4）实际开发中为我们使用事件捕获，更关注事件冒泡

（5）有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
    //捕获阶段 如果addEventListener 第三个参数是true 那么则处于捕获阶段
    //document -> html -> body -> father -> son
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
        alert('son');
    },true);
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father');
    },true);
    //结果显示先弹出father在弹出son

    //冒泡阶段 如果addEventListener 第三个参数是false 或者 省略 那么则处于冒泡阶段
    //son -> father -> body -> html -> document
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
        alert('son');
    },false);
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father');
    },false);
    document.addEventListener('click',function(){
        alert('document');
    },false);
    //结果显示先弹出son之后为father最后为document
</script>

4、事件对象

<div>123</div>
<script>
    //事件对象
    var div = document.querySelector('div');
    //div.onclick = function(event){
    //    console.log(event);
    //}
    div.addEventListener('click',function(event){
        console.log(event);
    })
    //1.event就是一个事件对象 写到侦听函数的 小括号里面 当形参来看
    //2.事件对象只有有了事件才会存在，他是系统自动创建的，不需要我们传递参数
    //3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 
    //比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标
    //如果是键盘事件里面就包含的键盘事件的信息，比如 判断用户按下了那个键
    //4.这个事件对象我们可以自己命名，比如event、evt、e
    //5.事件对象也有兼容性问题，ie678通过window.event 兼容性写法 e = e || window.event
</script>

4.1什么是事件对象

eventTarget.onclick = function(event){}

eventTarget.addEventListener('click',function(event){ })

//这个event就是事件对象，我们还喜欢的写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

4.2事件对象的使用语法

eventTarget.onclick = function(event){

//这个event就是事件对象，我们还喜欢的写成e或者evt

}

eventTarget.addEventListener('click',function(event){

//这个event就是事件对象，我们还喜欢写成e或者evt

})

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

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

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	组织冒泡标准

1、 e.target返回的是触发事件的对象（元素）

this返回的是绑定事件的对象（元素）

区别：

e.target点击了哪个元素，就返回哪个元素

this哪个元素绑定了这个点击事件，那么就返回谁

2、阻止默认行为（事件）让链接不跳转，或者让提交按钮不提交

3、传统的注册方法方式

普通浏览器 e.preventDefault(); 方法

低版本浏览器 ie678 returnValue 属性

可以使用return false 也能组织默认行为，没有兼容性问题特点：return后面的代码不执行了，

而且只限于传统的注册方式

5、阻止事件冒泡

5.1阻止时间冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法：IE6-8利用事件对象cancelBuddle属性

5.2阻止事件冒泡的兼容性解决方案

if（e && e.stopPropagation）{

e.stopPropagetion();

}else{

window.event.cancelBubble = true;

}

6、事件委托（代理、委派）

事件冒泡等本身的特性，会带来坏处，也会带来好处。

事件委托

事件委托也称为事件代理，在jQuery里称为事件委派。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托的作用

只操作了一次DOM，提高了程序的性能。

7、常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

7.1常用的鼠标事件

1、禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextment',function(e){

e.preventDefault();

}）

2、禁止鼠标选中（selectstart开始选中）

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

e.preventDefault();

})

7.2鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX	返回鼠标相对于电脑X坐标
e.screenY	返回鼠标相对于电脑Y坐标

8、常用的键盘事件

8.1常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

键盘事件	触发事件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发但是它不识别功能键，比如ctrl shift箭头等

注意：

1、如果使用addEventListener不需要加on

2、onkeypress和前面两个区别是，它不识别功能键，比如左右箭头，shift等。

3、三个事件的执行顺序是：keydown——keypress——keyup