JavaScript事件总结

简介:
1.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
2.JavaScript 与 HTML 之间的交互是通过事件实现的。
3.对于 Web 应用来说,有下面这些代表性的事件:鼠标单击、双击事件、鼠标移入移出事件等
1、鼠标事件
事件 描述
onclick 鼠标单击事件
ondbclick 鼠标双击事件
onmouseover 鼠标移到某元素之上的事件
onmouseout 鼠标移出事件
onmousemove 鼠标移动事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
2、键盘事件
方法 描述
onkeydown 按下事件(包括数字键、功能键)
onkeypress 按下键事件(只包含数字键)
onkeyup 放开键事件(包括数字键、功能键)
3、编辑事件
方法 说明
oncopy 复制事件
oncut 剪切事件
onpaste 粘贴事件
onselect 文本被选定
onsubmit 提交按钮被点击
这3个事件都对应有一个“onbeforeXXX”事件,表示发生在该事件之前的事件。
4、表单事件
事件 描述
onfocus 获取焦点事件
onblur 失去焦点事件
onchange 状态改变事件
onselect 选中文本事件
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
5、事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发 当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应 该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素
6、事件的冒泡
bubbles 事件属性返回一个布尔值,如果事件是起泡类型,则返回 true,否则返回 fasle。
事件冒泡分为三个阶段,它是这样的:
第一,捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄,那么在事件传播过程中运行这些句柄。
第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
第三,起泡阶段。在此阶段,事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。
7、事件的绑定
使用 对象.事件=函数形式绑定事件
它只能同时为同一个元素绑定同一事件一次
不能绑定多次,如果绑定多次,后面的会覆盖掉前面的
addEventListener()
- 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不加on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
8、事件的委派:
- 指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件被触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
- 事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
事件对象的属性target:返回触发此事件的元素(事件的目标节点)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值