JS事件

Posted tractors

tags:

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

一、事件绑定:

  (1) ele.onxxx=function () ;  //同一个元素只能绑定一次;

  (2) obj.addEventListener(type,fn,false);  //能绑定多个,IE9不兼容;

  (3) obj.attachEvent(‘on‘ +type,fn);  //IE独有

二、事件解除:

  (1) ele.onclick=null/false/"";

  (2) ele.romoveEventListener(type,fn,false);

  (3) ele.detachEvent(‘on‘+type,fn);

  注:若绑定匿名函数,则23两方法无法解除;

三、事件对象:

  (1) event||window.event; 兼容IE

  (2) 事件源对象:

    1) event.target;  //火狐只有这个

    2) event.srcElement; //IE只有这个

四、事件分类:

  (1) 鼠标事件:

    click,mousedown,mousemove,mouseup

    contextmenu,mouseenter,mouseleave

    mouseover,mouseout //子元素也会触发

    event.button:0/1/2;区分鼠标按键;(mousedown)

  (2) 移动端:touchstart,touchmove,touchend

  (3) 键盘事件:keydown>keypress>keyup

  注:keydown触发一次/keypress长按一直触发;

  (4) 文本类操作事件:

    1) input;  //有值改变就触发;

    2) focus//获得焦点;

    3) blur;  //失去焦点;

    4) change;  //有值改变,并失去焦点触发;

  (5) 窗体类事件:scroll,load;

  (6) window.onresize=function() ;  //监控浏览器尺寸

五、事件处理模型—事件冒泡/捕获:

  (1)冒泡事件:结构上(非视觉上)嵌套关系的元素,即同一事件,自子元素冒泡向父元素。(自底向上)

  (2)捕获事件:结构上(非视觉上)嵌套关系的元素,即同一事件,自父元素捕获至子元素(事件源元素)。(自底向上)

    注:IE没有捕获事件。

  (3)触发顺序:先捕获,后冒泡。

  (4focus,blur,change,submit,reset,select等事件不冒泡。

六、取消冒泡:

  (1) event.stopPropagation();

  (2) event.cancelBubble=true;  //IE独有

七、阻止默认事件:a标签跳转,右键菜单等)

  (1) return false;  //以对象属性方式注册事件才生效

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

  (3) event.returnValue=false;  //兼容IE

  例:取消右键

  function.oncontextmenu=function (e)

    e.preventDefault();

  

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

js原生模拟点击事件

js动态绑定onclick事件,事件点击多时无响应

js阻止默认事件的方法

怎样理解js中的事件监听

JS事件

js如何清除所有绑定的事件?