Javascript DOM事件操作小结（监听鼠标点击、释放,悬停、离开等)

本文实例总结了Javascript DOM事件操作。分享给大家供大家参考，具体如下：

使用Java脚本语言可以对超文本标记语言页面上的各种事件进行监听，如鼠标点击/释放，鼠标悬停/离开，等等。

效果图：

代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta http-equiv=' Content-Language ' Content=' zh-cn '/title JavaScript事件/title head style type=' text/CSS ' body { background-color : # eeee } div。greentn { color :白色；背景-颜色：绿色；宽度宽度：200像素高度：20 px文本对齐：居中；衬垫-顶部：20像素；填充-底部：20 px}按钮。greentn { color :白色；背景-颜色：绿色；宽度宽度：200像素高度：50 px文本对齐：居中；border :0 px }/style/head body on load=' CheckCooKies()'！-页面加载时检测浏览器饼干是否启用- h3(一)点击时改变超文本标记语言元素内容/h3 h41 .直接改变/h4 p onclick='this.innerHTML='谢谢''请点击文字/p h42 .通过函数改变/h4 p onclick='changeText(this)'请点击文字/p脚本函数changeText(ele){ ele.innerHTML='谢谢；}/脚本脚本函数CheckCookies(){ if(导航器。CookieEnabled){//alert('已启用cookie') }else{ //alert('未启用cookie ')} }/脚本h3(二)加载和空载事件/h3 p加载和空载事件会在用户进入或离开页面时被触发英国铁路公司加载事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本英国铁路公司加载和空载事件可用于处理cookie /p h3(三)onchange事件/h3 p请输入英文字符：输入类型=' text ' on change=' to Opper(this)' p当您离开输入字段时，会触发将输入文本转换为大写的函数/p脚本函数图珀(ele){ ele。值=ele。价值。ToupPerCase()；}/脚本h3(四)onmouseover和onmouseout事件/H3 div class=' greentn ' on mouse over=' MoVER(this)' on mouse out=' Mout(this)'把鼠标放在上面/div脚本函数mOver(ele){ ele.innerHTML='谢谢}函数mOut(ele){ ele.innerHTML='把鼠标放在上面}/脚本h3(五)onmousedown、onmouseup以及onclick事件/H3按钮类=' greentn ' on mouse down=' mDown(this)' on mouse up=' MuP(this)'鼠标抬起/按钮脚本函数mDown(ele){ ele.innerHTML='鼠标已按下埃勒。风格。背景颜色='蓝色' }函数mUp(ele){ ele.innerHTML='鼠标抬起埃勒。风格。background COlOr=' green ' }/脚本H3(六)聚焦事件/h3 p当输入框获取焦点时，改变其背景色输入类型=' text ' on focus=' changebcolor(this，true)' on bulr=' changebcolor(this，false)' /p脚本函数changebcolor(ele，hasFocus){ if(hasFocus){ ele。风格。背景色='黄色} else { ele。风格。背景色='灰色' }/脚本/车身PS 3360关于爪哇岛描述语言常用事件及相关说明还可参考本站在线工具：

爪哇岛描述语言事件与功能说明大全：http://工具。JB 51。net/table/JavaScript _ event

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript事件相关操作与技巧大全》 、 《JavaScript操作DOM技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。