发布于 

事件处理

事件处理

事件源:事件类型:事件处理函数: 事件三要素其实就是设定某个元素上发生了某个时间后要做什么事

事件绑定(事件注册)

常用事件概览(on)

鼠标事件:

click,dblclick

mouseover:鼠标进入某个盒子范围的那个时刻

mouseout:离开

mousemove:鼠标移动事件,通常是一个持续时间。

mouseenter:(盒子范围)跟over几乎一样,但是更好用

mouseleave: (离开盒子范围)out一样,

键盘事件:

keydown:按钮按下去的时刻发生

keyup:抬起

keypress:按键一次

表单事件:

submit:表单提交事件

change:表单项的数据被改变的时刻(光标离开后)

input:输入时刻

focus:获得焦点。。。

blur:失去焦点。。。(空字符串)

其它事件:

load:加载成功事件(网页加载)

事件绑定

标签属性绑定---------过时,不推荐

语法:<div on事件=“xx函数();”>…</div.>(调用函数)

移除方式:

●xx元素.onxx事件=null

●直接在html中删除该事件绑定代码(ps:不过这就不是js的工作)

对象属性绑定---------简洁、常用,满足绝大数使用

☞xx元素.onxx事件 = 函数名; //函数名后不带括号

移除方式:

●xx元素.onxx事件=null

☞xx元素.onxx事件=function(){…}; //这里是匿名函数

(注:等号后面是一个函数名,;不是调用函数)

对象方法绑定---------更好的可控性

**语法:**xx元素.addEventListener(‘xx事件’,xx事件处理函数);

第2个参数是事件处理函数,可以是匿名函数,也可以是一个函数名

对应删除:

●xx元素.removeEventListenter(‘xx事件’,xx事件处理函数);

特别注意:绑定后如果=需要再移除,则使用同样的函数名,且第1参数也要求一样

函数中的this

提示:在对象属性绑定和通过对象方法绑定的事件处理函数中,都可以直接使用this关键词。但通过元素标签属性的形式绑定的事件处理函数中不可以直接使用。

排他思想(特例):

排他思想的基本代码模式:

1, 设定若干同类元素相同表现

2, 设定当前某个特殊元素的特殊表现(通常都会需要用到 this )

1
2
3
4
/*先设定所有一致(所有都同样)*/

/*给当前设置特殊*/