JS DOM事件
阿新 • • 發佈：2019-03-09
event對象 用戶名 mouseover ons 觸發 cli focus 發生 onclick
一.DOM事件格式
元素對象.on事件名稱 = function(){ // 事件發生時，執行的代碼 }
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
eg1: onfocus onblur onmouseover onmouseout
<body>
<form action="" id="from1">
<input type="text" name="username" value="請輸入用戶名"><span style="font-style: italic"></span>
<p></p>
<input type="text" name="passwd" value="請輸入密碼">
<p></p>
<input type="submit" value="提交">
</form>
<h1 id="one">點擊我領取屠龍寶刀！</h1>
<script>
ele_form
ele_form.onsubmit=function(){
console.log(this)
//阻止事件方式1 false表示攔截表單提交 其他放行
return false;
};
ele_form.onsubmit=function(event){
console.log(this)
//阻止事件方式2 event.preventDefault
event.preventDefault();
};
var name_ele = document.getElementsByName("username")[0];
Event 對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.
比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這裏就時KeyCode；
思考：onclick＝function(event){};這個方法是誰調用的？
事件傳播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert(‘111‘);
}
document.getElementById("abc_2").onclick=function(event){
alert(‘222‘);
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
參考：
https://www.cnblogs.com/chichung/p/9688399.html
https://www.cnblogs.com/yuanchenqi/articles/5980312.html
JS DOM事件