JavaScript 事件

事件

1. 如何绑定事件

1.ele.onxxx = function (event) {}

​   兼容性很好,但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上

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

​   IE9以下不兼容,可以为一个事件绑定多个处理程序

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

​   IE独有,一个事件同样可以绑定多个处理程序

2.事件处理的运行环境

  1. 1.ele.onxxx = function (event) {}

    程序this指向是dom元素本身

  2. obj.addEventListener(type, fn, false);

    程序this指向是dom元素本身

  3. obj.attachEvent(‘on’ + type, fn);

    程序this指向window

3.解除事件处理程序

  1. ele.onclick = false/‘’/null

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

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

    注意: 若绑定匿名函数,则无法解除

4.事件处理模型

1.事件冒泡

结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素

冒泡向父元素。(自底向上)

2.事件捕获

结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素

捕获至子元素(事件源元素)。(自底向上)

​   注意:

     1.IE没有捕获事件

​     2.触发顺序,先捕获,后冒泡

​     3.focus,blur,change,submit,reset,select 等事件不冒泡

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

1.取消冒泡

  1. W3C标准 event.stopPropagetion() ; 但不支持IE9以下版本

  2. IE独有,event.cancelBubble = true;

2.阻止默认事件

默认事件 — 表单提交,a标签跳转,右键菜单等

  1. return false

    以对象属性的 方式注册的事件才生效

  2. event.preventDefault() , W3C标准,IE不兼容

  3. event.returnValue = false; 兼容IE

6.事件对象

当触发事件时,系统会返回一个事件对象,含有对象触发的事件,事件源等...

  1. eventwindow.event (用于IE)

  2. 事件源对象:

    事件产生的源头对象

    event.target 火狐独有的

    event.srcElement Ie独有的

    这俩chrome都有

7.事件委托

利用事件冒泡,和事件源对象进行处理

  优点:1. 性能 不需要循环所有的元素一个个绑定事件

​ 2.灵活 当有新的子元素时不需要重新绑定事件

8.事件分类

1.鼠标事件

  • click

    鼠标点击,onclick = onmousedown+onmouseup

  • mousedown

    鼠标按下

  • mousemove

    鼠标移动

  • mouseup

    放开单击鼠标

  • mouseover = mouseenter //html5写法

    鼠标进入目标位置

  • mouseout = mouseleave //html5写法

    鼠标离开目标位置

  • contextmenu

    鼠标右键

如何识别鼠标单击双击?

​ 用button来区分鼠标的按键,0/1/2,在事件对象查看

  ​ 0 --> 单击,1 --> 滚动轮,2 --> 双击

注意: DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键。

如何解决mousedown和click的冲突?

​   利用时间差,时间小于0.3秒则视为click;

2.键盘事件

  • keydown '.oo'

    用户在键盘上按下某按键时发生。一直按着某按键则会不断触发

  • keypress

    用户按下一个按键,并产生一个字符时发生,一直按住某键则不断触发

  • keyup

    用户释放某一个按键是触发。

触发的顺序

​ keydown > keypress > keyup

keydown和keypress的区别

keydown 可以响应任意键盘按键,keypress只可以相应字符类键盘按键

keypress返回ASCII码,可以转换成相应字符

3.文本操作事件

  • input

    获取文本内容

  • focus

    获取焦点时

  • blur

    失去焦点时

  • change

    onchange 事件会在域的内容改变时发生。

posted @ 2017-10-13 12:53  im.lhc  阅读(101)  评论(0编辑  收藏  举报