鼠标事件

 onclick 鼠标点击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
 鼠标 / 键盘属性
属性 描述
altKey 返回当事件被触发时,“ALT” 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,“CTRL” 键是否被按下。
metaKey 返回当事件被触发时,“meta” 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时,“SHIFT” 键是否被按下。
onmousemove
- 该事件将会在鼠标在元素中移动时被触发
事件对象

  • 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘那个按键被按下,鼠标滚轮滚动的方向

clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标
这两个获取都是当前可见坐标

 处理兼容性问题
event=event||window.event;
pageX和pageY
- 用于获取鼠标相对于当前页面的坐标
但是这个属性在IE8中不兼容,所以如果需要兼容IE8,则不要使用

获取滚动条滚动的距离
Chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是HTML的
最新的Chrome浏览器中可以使用document.documentElement.scrollTop获取值

 JavaScript事件冒泡(Bubble)
- 所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的,如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true

 事件的委派

  • 指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
  • 事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

addEventListener()
- 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不加on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值