js-事件

Posted 陈皮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-事件相关的知识,希望对你有一定的参考价值。

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兼容练习.



以上是关于js-事件的主要内容,如果未能解决你的问题,请参考以下文章

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

原生js禁止页面滚动

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程