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后面的內容作為純文本來解析。