js常用事件
|---给元素添加事件的三种方式
|-----在标签元素内部 添加事件
|------onclick事件：点击事件
|------ondbclick事件：双击事件
|------onload事件：页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中
|------onchange事件：当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。
说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果 是下拉框，则选择结束后即触发。
|------onblur事件和onfocus事件：onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件
|------onscroll事件：窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move
|------鼠标相关事件：
1.onmousemove：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。
2.onmouseout：鼠标离开某对象范围时，触发事件调用函数。
3.onmouseover：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。
4.onmouseup： 当鼠标松开时触发事件
5.onmousedown：当鼠标按下键时触发事件
|-----通过循环给多个元素添加事件
<body> <div class="one">111</div> <div class="one">222</div> <div class="one">333</div> <div class="one">444</div> </body>
<script type="text/javascript">
var one = document.getElementsByClassName("one");
for(var i = 0;i<one.length;i++){
one[i].onclick = function(){
alert(this.innerHTML);
}
}
</script>
|-----通过addEventListener() 方法 监听事件函数
|------无参数
<button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } </script>
|------有参数
<button id="myBtn">点我</button> <p id="demo"></p>
<script> var p1 = 5; var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script>
|------移除监听事件：
removeEventListener() 方法
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。 <p>点击按钮移除 DIV 的事件句柄。</p> <button onclick="removeHandler()" id="myBtn">点我</button> </div> <p id="demo"></p>
<script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script>
JS操作document对象
|---找到对象
1.
document.getElementById()
返回对拥有指定 id 的第一个对象的引用。
2.
document.getElementsByName()
返回带有指定名称的对象集合。
3.
document.getElementsByTagName()
返回带有指定标签名的对象集合。
4.
document.getElementsByClassName()
返回对拥有指定 class 的对象集合。
|---操作对象
|-----操作属性
1.取值：getAttribte()
document.getElementsByTagName("标签名")[0].getAttribute("属性名");
2.赋值：setAttribte()
document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");
3.删除属性;removeAttribute()
document.getElementsByTagName("标签名")[0].removeAttribute("属性名");
|-----操作样式
1.内联样式：style.xxxx
2.class：
（1）className
（2）把class当成属性来看：element.className = 'blue';
|-----操作内容：
1.表单元素：value：
document.getElementById("id名字").value;
（1）文本框
（2）单选框
（3）复选框
2.非表单元素：
（1）innerHTML
document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";
浏览器会将inneHTML后面的内容作为html来解析。
（2）innerText
document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";
浏览器会将innerText后面的内容作为纯文本来解析。