js-事件

Posted 2021-01-23 陈皮

js-事件

1.什么是事件

html页面与JS之间的交互时通过事件来完成的。事件，就是文档与浏览器窗口发生的一些特定的交互瞬间。可以使用侦听器（处理程序）来预订事件，以便事件发生时执行相应的程序代码。

2.如何绑定事件

1) elem.onxxx = function(event){}；

• 兼容性很好，但是一个元素只能绑定一个处理程序。
• 相当于写在HTML行间。
• DOM0级事件

2） 事件侦听器：

• elem.addEventListener(type,func,false);
  • IE9以下不兼容，可以为一个事件绑定多个处理程序。
  • 第一个元素使指事件类型，如‘click‘;
  • 第二个元素使事件处理函数；
  • 第三个元素指定事件触发阶段，false表示在事件冒泡阶段触发（默认），true表示在事件的捕获阶段触发。
• elem.attchEvent(‘on‘+type,func);
  • IE独有的方法，一个事件可以绑定多个处理程序。

3.事件处理程序的运行环境

1）elem.onxxx = function(event){}；

• 程序this指向dom元素本身。

2）elem.addEventListener(type,func,false);

• 程序this指向dom元素本身。

3）elem.attchEvent(‘on‘+type,func);

• 程序this指向window.

• 改变this指向：

  var div = getElementByTagName(‘div‘);
  div.attchEvent(‘onclick‘,fucntion(){
      handle.call(div);
  })
  fucntion handle(){
  
  }

封装addEvent(elem, type, func)方法：

function addEvent(ele,type,handle){
        if(ele.addEventListener){
            ele.addEventListener(type,handle,false);
        }else if(ele.attachEvent){
            ele.attachEvent(‘on‘+type,function(){
                handle.call(ele);
            })
        }
        else{
            ele[‘on‘+type] = handle;
        }
    }

4.解除事件处理函数

1）ele.onxxx = null/false/‘‘;
2)ele.removeEventListener(type,func,false);
3)ele.detachEvent(‘on‘+type,func);

• PS:若绑定的是匿名函数，则无法解除。

5.事件处理模型--事件捕获、事件冒泡

• 事件捕获：自父元素捕获至子元素（事件源元素），自顶向下；
• 事件冒泡：自子元素冒泡至父元素，自底向上。
• 一般事件的触发顺序：先捕获，后冒泡。
• focus,blur,change,sbmit,reset,select等事件不冒泡。

6.取消冒泡和阻止默认事件

1）取消冒泡

• W3C标准：event.stopPropagation();DNA不支持IE9以下版本。
• IE的方法：event.cancelBubble = true;
• 封装取消冒泡的函数stopBubble：

function stopBubble(e){
    if(e.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

2)阻止默认事件

• 默认事件：表单提交，a标签跳转，右键菜单等。

• 1.return false;以对象属性方式注册的事件才生效。

  //取消右键菜单事件
  document.oncontextmenu = function(){
          console.log(‘aa‘);
          return false;
      }
  
  //取消a标签跳转事件
  a.onclick = function(){
      return false;
  }
  <a href="javascript:void(0)">www.baidu.com</a>
  

• 2.event.preventDefault();//IE9以下不兼容

  document.oncontextmenu = function(e){
          console.log(‘aa‘);
          e.preventDefault();
      }
  

• 3.event.returnValue = false;//兼容IE

  document.oncontextmenu = function(e){
          console.log(‘aa‘);
          e.returnValue = false;
      }

• 封装取消默认事件函数cancelDefault:

  document.oncontextmenu = function(e){
      console.log(‘aa‘);
      cancelDefault(e);
  }
  
  function cancelDefault(e){
      if(e.preventDefault){
          e.preventDefault();
      }else{
          e.returnValue = false;
      }
  }

7.事件对象

• event || window.event;//后者用于IE;
• 事件源对象
  • event.target;//火狐
  • event.srcElement;//IE
  • 这两chrome都用
• 兼容性写法：

var e = event || window.event;
var target = e.target || e.srcElement;

8.事件委托

//事件委托
    var li = document.getElementsByTagName(‘li‘);
    var ul = document.getElementsByTagName(‘ul‘)[0];
    ul.onclick = function(event){
        var e = event || window.event;
        var t = e.target || e.srcElement;
        console.log(t.innerText);
    }

9.事件分类

鼠标事件：

• click,mousedown,mouseup,mousemove,contextmenu,mouseover,mouseout，mouseenter,mouseleave
• 用button来区分鼠标的按键 0/1/2 ,mousedown/mouseup，button == 0 --> left;button == 2 --> right
• DOM3规定：click只能监听左键，只能通过mousedown和mouseup来判断。
• 如何解决mousedown和click的冲突。

    var first = 0;
    var last = 0;
    var key  = false;
    document.onmousedown = function(e){
        first = new Date().getTime();
    }
    document.onmouseup = function(e){
        last = new Date ().getTime();
        if(last - first < 300) {
            key =true;
        }
    }
    document.onclick = function(){
        if(key){
            console.log("click");
            key = false;
        }
    }

键盘事件

• keydown, keyup,keypress
• keydown > keypress > keyup
• keydown和keypress的区别：
  • keydown可以响应任何键盘按键，keypress只能响应字符类按键。
  • keypress返回ASCII码，可以转换成相应字符。

文本操作事件

• input,focus,blur,change

  var input1 = document.getElementsByTagName(‘input‘)[0];
  input1.oninput = function(){
      console.log(input1.value);
  }

窗体操作事件(window上的事件)

• scroll

document.onscroll = function (){
        console.log(window.pageXOffset + " " +window.pageYOffset);
    }

• load: window.onload();//load事件会在页面的dom树都加载完之后才触发，效率极低，主体程序不能写在load事件的事件处理函数里面。

• IE6没有fixed，fixed兼容练习.