更新時間:2021-10-29 來源:黑馬程序員 瀏覽量:
load
一個資源及其相關資源已完成加載。
JavaEE
鴻蒙應用開發(fā)
HTML&JS+前端
Python+大數(shù)據(jù)開發(fā)
人工智能開發(fā)
AI+設計
軟件測試
新媒體+短視頻
集成電路應用開發(fā)
AI+Linux云計算運維
<body onload="f1()" ></body>
<script>
function f1(){
alert('f1');
}
</script>
focus
元素獲得焦點(不會冒泡)
blur
元素失去焦點(不會冒泡)
<body>
<input type="text" id="t" value="請輸入用戶名" onfocus="f1()" onblur="f2()">
</body>
<script>
function f1(){
document.getElementById('t').value = '';
}
function f2(){
var v = document.getElementById('t').value;
alert(v);
}
</script>
mouseenter
指針移到有事件監(jiān)聽的元素內
mouseover
指針移到有事件監(jiān)聽的元素或者它的子元素內
mousemove
指針在元素內移動時持續(xù)觸發(fā)
mousedown
在元素上按下任意鼠標按鈕
mouseup
在元素上釋放任意鼠標按鍵
click
在元素上按下并釋放任意鼠標按鍵
dblclick
在元素上雙擊鼠標按鈕
contextmenu
右鍵點擊 (右鍵菜單顯示前)
mouseleave
指針移出元素范圍外(不冒泡)
mouseout
指針移出元素，或者移到它的子元素上
select
文本被選中
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
來啊
</div>
</body>
<script>
var d = document.getElementById('d');
//當鼠標懸浮時觸發(fā)
d.onmouseover = function(){
console.log('來了?');
}
//當鼠標離開時觸發(fā)
d.onmouseout = function(){
console.log('不要啊');
}
//當鼠標按下時觸發(fā)
d.onmousedown = function(){
console.log('用力啊');
}
//當鼠標彈起時觸發(fā)
d.onmouseup = function(){
console.log('再來');
}
//當鼠標移動時觸發(fā)
d.onmousemove = function(){
console.log('別亂動');
}
//當點擊右鍵時
d.oncontextmenu = function(){
console.log('你想干什么？');
return false;
}
// 當復制內容時
d.oncopy = function(){
console.log('你敢復制我？');
return false;
}
</script>
keydown
按下任意按鍵
<body>
<input type="text" value="" id="t">
</body>
<script>
var d = document.getElementById('t');
//當鍵盤按下時觸發(fā)
d.onkeydown = function(){
console.log('推到?');
}
//當鍵盤按下時觸發(fā)
d.onkeypress = function(){
console.log('撩起2?');
}
//當鍵盤彈起時觸發(fā)
d.onkeyup = function(){
console.log('撩起?');
}
</script>
keypress
除 Shift, Fn, CapsLock 外任意鍵被按住. (連續(xù)觸發(fā))
keyup
釋放任意按鍵
reset
點擊重置按鈕時 ()
submit
點擊提交按鈕
<body>
<form id="f" action="1.2.5.php">
姓名:<input type="text" name="" value=""> <br>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form>
</body>
<script>
var d = document.getElementById('f');
//當表單提交時觸發(fā)
d.onsubmit = function(){
alert('t');
}
//當表單重置時觸發(fā)
d.onreset = function(){
alert('re');
}
</script>
change
當內容改變且失去焦點時觸發(fā) (存儲事件)
input
當內容改變時觸發(fā) (值變化事件)
<body>
<input type="text" id="t" value="">
</body>
<script>
var d = document.getElementById('t');
//當內容改變且失去焦點時觸發(fā)
d.onchange = function(){
console.log('t');
}
//當內容改變時觸發(fā)
d.oninput = function(){
console.log('in');
}
</script>
猜你喜歡
據(jù)學科列表頁右側.png)
.jpg)