- JS事件:(更多查询W3C HTML DOM事件(event)对象)
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
2. 页面加载事件:
-此事件只能出现一次。
-若出现两次后面的加载事件会覆盖掉前面的加载事件。
3. JS事件对象(event):
-获取事件加载后页面等对应的变化。
-处理兼容性问题时:event=event || window.event=event(参数为event时)
-跟随鼠标移动图案制作:
事件冒泡现象:
-在开发中大部分情况下都是有用的。
-层级关系,向上传导。
-清除方法:事件参数.cancelBubble=true;
-注意事项:当清除冒泡时,两个移入元素触发事件会被影响。
xdiv不清除冒泡时:
-----div元素可以自由移入Xdiv里面。
Xdiv清除冒泡时:
----当指针移入Xdiv元素时,div元素会停置。
4. 事件的委派:
- 指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
- 事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
特别运用:事件对象的属性target:返回触发此事件的元素(事件的目标节点)
5. 绑定事件:
①普通绑定方法:
②使用addEventListener( )方法:不支持IE8及以下的浏览器
addEventListener(参数1,参数2,参数3)
- 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不加on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false,传true时
将冒泡现象反向进行。
-使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
-这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
-this:此方法中this是指绑定事件的对象
特别说明:统一法②、法③this
③使用attachEvent()方法:在IE8中可以使用
- 在IE8中可以使用attachEvent(参数1,参数2)来绑定事件
- 参数:
1.事件的字符串,要on
2.回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数
- 执行顺序:从后往前执行(到数)
- this:此方法中的this是指window
6. 拖拽元素:
流程:
1.当鼠标被拖拽元素按下时,开始拖拽 onmousedown
2.当鼠标移动时被拖拽的元素跟着鼠标移动 onmousemove
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
7. 键盘事件:键盘事件一般都会绑定给一些可以获取焦点的对象或则是document
onkeydown: 键盘被按下事件
- 如果一直按着某个键不松开,则会一直触发该事件
- 当onkeydown事件连续触发时,第一次和第二次之间的间隔时间稍微长一点,其他则会非常快。这是为了防止误操 作的发生
onkeyup: 键盘被松开的事件
keyCode属性:获取按键编码
- 键盘事件运用(利用上下左右控制元素移动)
法一:
法二: