JavaScript事件高级

事件高级

一、事件的绑定和取消

原先经常使用添加事件的做法：obj.事件名=function(){};

但是我们发现，为同一个节点对象，添加了多个同名事件，会覆盖。

        o.onclick = function () {
            console.log('我被点击了');
        };
		o.onclick = function () {//会覆盖上一个
            console.log('我又被点击了....');
        };

1）事件绑定

事件的绑定的事件，不会覆盖

//事件绑定
obj.addEventListener(事件名,事件函数,是否捕获);//标准浏览器和高版本的IE
//注意：1.事件名  不加on前缀   2.是否捕获  false  默认  冒泡      true  捕获

//低版本IE：
obj.attachEvent(on事件名,事件函数);//事件名要添加on前缀

2）事件取消

使一些时间失效(取消事件绑定)

obj.onclick=null;//取消事件
obj.removeEventListener(事件名,事件函数);//移除事件绑定

//低版本IE：
obj.detachEvent(事件名,事件函数);//事件名要添加on前缀

注意：移除事件时，一定要保证移除的事件函数是当初添加上的事件函数

二、事件对象

当事件被触发时，浏览器会将所有与事件相关的信息封装为一个对象，通过事件函数传递。

事件对象：与事件相关的信息封装的一个对象

事件对象的常用属性：

• clientX/clientY 鼠标的位置 相对于屏幕的位置
• pageX/pageY 鼠标的位置 相对于页面的位置
• type/srcElement 事件类型
  • 注意：在低版本的IE上，应该使用srcElement取值(type取不到值)
• ctrlKey,altKey,shiftKey 布尔类型，，是否按了组合键
• keyCode/key 注意：key不适用于低版本IE

2.事件对象的兼容性问题：

低版本IE上，不支持从事件函数中获取事件对象，需要通过window.event

//事件对象兼容性写法
e=e||window.event;

三、事件流

1.事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流

• 冒泡型事件流模型
  • 默认是事件冒泡事件流机制，即当一个元素接收到事件的，会把接收到的事件依次传给他的父元素一直到window
  • 现代主流浏览器都是冒泡机制.
• 捕获型事件流模型
  • 由最外层元素先触发，逐层向内传递，到具体的事件触发元素

2.阻止事件的冒泡

可以通过事件对象的stopPropagation()方法来阻止事件冒泡。

• ev.stopPropagation() 标准浏览器
• ev.cancelBubble=true 低版本IE

ev ? ev.stopPropagation() : window.event.cancelBubble = true;//阻止事件冒泡的兼容性写法

四、拦截浏览器的默认行为

根据不同的添加事件的方案，拦截的方案也不一致

• 事件添加 obj.事件名 拦截： return false

          btn.onclick = function () {
              alert('我是百度');
              return false;//拦截默认行为
          };
  

• 事件绑定 obj.addEventListener() 拦截：e.preventDefault()

          btn.addEventListener('click',function(e){
              e=e||window.event;
              alert("hello world");
              e.preventDefault();//拦截默认行为
          },false)
  

• attachEvent() 拦截：e.returnValue=false;

          btn.attachEvent('onclick', function (e) {
              e = e || window.event;
              alert("hello world");
              e.returnValue = false;//拦截默认行为
          }, false)
  

示例：拦截右键菜单:

        //拦截右键菜单的弹出
        document.oncontextmenu=function(){
            return false;
        };

五、键盘事件

• onkeydown
• onkeyup
• onkeypress 注意：小键盘按钮不会触发keypress事件

通过事件对象keyCode属性来获取键盘的编码(键码),可以判别出来用户按了那个键？

六、滑轮事件

• onmousewheel IE和谷歌浏览器
  • wheelDelta 滚动距离 -120向下 120向上
• addEventListener(“DOMMouseScroll”,function(){},false) 火狐浏览器
  • detail 滚动距离 -3 向上 3向下

七、事件的委托(代理)

原理：事件冒泡机制

实现：将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件

示例：

    <div id="box">
        <button>哈哈哈</button>
        <button>哈哈哈</button>
        <button>哈哈哈</button>
    </div>
    <button id="btn">添加</button>

        var o = document.querySelector('#box');

        o.onclick = function (e) {
            e = e || window.event;
            // console.log(e.target.nodeName);
            var target = e.target || e.srcElement;//兼容性
            if (target.nodeName == "BUTTON") {
                console.log(1);
            }
        };

        document.querySelector('#btn').onclick = function () {
            var newButton = document.createElement('button');
            newButton.innerHTML = "哈哈哈";
            o.appendChild(newButton);
        };