属性
此事件什么时候发生(什么时候被触发)
onabort
图象的加载被中断
onblur
元素失去焦点
onchange
区域的内容被修改
onclick
当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子）
ondblclick
当用户双击某个对象时调用的事件句柄
onerror
在加载文档或图像时发生错误
onfocus
元素获得焦点
onkeydown
某个键盘按键被按下
onkeypress
某个键盘按键被按下并松开
onkeyup
某个键盘被松开
onload
一张页面或一副图片完成加载
onmousedown
鼠标按钮被按下
onmousemove
鼠标移动过来后
onmouseout
鼠标从某个元素移开
onmouseover
鼠标移动到某个元素之上
onmouseup
鼠标按键被松开
onreset
重置按钮被点击
onresize
窗口或框架被重新调整大小
onselect
文本被选中
onsubmit
确认按钮被点击
onunload
用户退出页面
注：一个标签可以绑定多个事件，this标签当前正在操作的标签，event封装了当前事件的内容。
来几个案例吧，不然看完了感觉跟没看一个样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ list-style: none; padding: 0; margin: 0; } ul li{ float: left; background-color: #038CAE; color: white; padding: 15px 20px; } .clearfix:after{ display: block; content: '.'; height: 0; visibility: hidden; clear: both; } .hide{ display: none; } .tab-menu{ border: 1px solid #dddddd; } .tab-menu .title{ background-color: #dddddd; } .tab-menu .title .active{ background-color: white; color: black; border-top: 2px solid red; } .tab-menu .content{ border: 1px solid #dddddd; min-height: 150px; } </style> </head> <body> <div> <div> <div> <ul> <li target = "h1">价格趋势</li> <li target = "h2">市场分布</li> <li target = "h3">其他</li> </ul> </div> <div id = "content"> <div con = "h1">content1</div> <div con = "h2">content2</div> <div con = "h3">content3</div> </div> </div> </div> <script> function Show(ths) { var target = ths.getAttribute('target'); ths.className = 'active'; var brother = ths.parentElement.children; for (var i=0;i<brother.length;i++){ if (ths == brother[i]){ }else { brother[i].removeAttribute("class"); } } var content = document.getElementById("content").children; for (var j=0;j<content.length;j++){ var current_content = content[j]; var con = current_content.getAttribute("con"); if (con == target){ current_content.classList.remove("hide"); }else { current_content.className = "hide"; } } } </script> </body> </html> 标签菜单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="点我啊" /> <div > <div>123</div> <div alex="sb">123</div> <div>123</div> <div alex="sb">123</div> <div alex="sb">123</div> <div>123</div> <div alex="sb">123</div> <div>123</div> <!--<input type="text">--> <!--<input type="password">--> <!----> </div> <script> function Func() { // i1 // i1所有孩子,循环每一个孩子，判断如果alex=‘sb' var i1 = document.getElementById('i1'); var divs = i1.children; for(var i=0;i<divs.length;i++){ var current_div = divs[i]; var result = current_div.getAttribute('alex'); // console.log(result); if(result == "sb"){ current_div.innerText = "456"; } } } </script> </body> </html> 通过自定义属性改变元素值
以上这篇JavaScript DOM 对象深入了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: