DOM、鼠标、表单、多媒体事件

  • Post author:
  • Post category:其他


  1. DOM


    document.

    getElementById

    ()

    : id

    document.

    getElementsByName

    ():通过name属性(可重复),返回一个集合

    documen.

    getElementsByClassName

    (): calss属性,返回一个集合

    documen.

    getElementsByTagName

    (): 标签名,返回一个集合

新增:var mydiv=document.

createElement

(“div”)


document.body.appendChild(

“mydiv”)

删除:获取,调用remove()

2 鼠标事件


onclick


监听,当用户点击某个对象时调用的事件



oncontextmenu


当用户点击鼠标右键打开上下文菜单时触发



ondblclick


当用户双击某个对象时调用的事件



onmousedown


鼠标按钮被按下,不放开



onmouseenter


当鼠标指针移动到元素上时触发



onmouseleave


当鼠标指针移出元素时触发



onmousemove


鼠标被移动



onmouseover


鼠标移到某元素之上



onmouseout


鼠标从某元素移开



onmouseup


鼠标按键被松开

3 键盘事件


onkeydown


某个键盘按键被按下



onkeypress


某个键盘按键被按下并松开



onkeyup


某个键盘按键被松开



鼠标/键盘事件对象的属性:




altKey

返回当事件被触发时,“ALT”是否被按下


button

返回当事件被触发时,哪个鼠标按钮被点击


clientX

返回当事件被触发时,鼠标指针的水平坐标


clientY

返回当事件被触发时,鼠标指针的垂直坐标


screenX

返回当事件被触发时,鼠标指针的水平坐标


screenY

返回当事件被触发时,鼠标指针的垂直坐标


ctrlKey

返回当事件被触发时,“CTRL”键是否被按下


Location

返回按键在设备上的位置


charCode

返回onkeypress事件触发键值得字母代码

key 在按下按键时返回按键的标识符


keyCode

返回onkeypress事件触发的键的值得字符代码,或者onkeydown或onkeyup事件的键的代码


which

返回onkeypress事件触发的键的值得字符代码,或者onkeydown或onkeyup事件的键的代码


metaKey

返回当事件被触发时,“meta”键是否被按下


relatedTarget

返回与事件的目标节点相关的节点


shiftKey

返回当事件被触发时,“SHIFT”键是否被按下


client,screen,offset的区别:

这里写图片描述

注:page比client多一个滚动条的大小。

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标

4 表单事件


onunload

卸载事件


onblur

元素失去焦点时触发


onchange

该事件在表单元素的内容改变时触发(

<input>,<keygen>,<select>,<textarea>




onfocus

元素获取焦点时触发


onfocusin

元素即将获取焦点时触发


onfocusout

元素即将失去焦点时触发


oninput

元素获取用户输入时触发


onreset

表单重置时触发


onsearch

用户向搜索域输入文本时触发(

<input="search">

)


onselect

用户选取文本时触发

(<input> <textarea>)



onsubmit

表单提交时触发

5 多媒体事件

onabort 事件在视频/音频(audio/video)终止加载时触发

oncanplay 事件在用户可以开始播放视频/音频时触发

oncanplaythrough 事件在视频/音频可以正常播放且无需停顿和缓冲时触发

ondurationchange 事件在视频/音频的时长发生变化时触发

onemptied 当前播放列表为空时触发

onended 事件在视频/音频播放结束时触发

onerror 加载期间发生错误时触发

onloadeddata 在浏览器加载视频/音频当前帧时触发

onloadmetadata 在指定视频/音频的元数据加载后触发

onloadstart 在浏览器开始寻找指定视频/音频时触发

onpause 暂停时触发

onplay 开始播放时触发

onplaying 暂停或者在缓冲后准备重新开始播放时触发

onratechange 播放速度发生改变时触发

onprogress 在浏览器下载指定的视频/音频时触发

onseeked 在用户重新定位播放位置后触发

onseeking 用户开始重新定位时触发

onstalled 在浏览器读取媒体数据,但媒体数据不可用时触发

onsuspend 浏览器读取媒体数据中止时触发

ontimeupdate 在当前的播放位置发生改变时

onvolumechange 音量发生改变时触发

onwaiting 视频由于要播放下一帧而需要缓冲时触发



版权声明:本文为bang3原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。