更新时间:2021-10-29 来源:黑马程序员 浏览量:
load
一个资源及其相关资源已完成加载。
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
<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
指针移到有事件监听的元素内
mouseover
指针移到有事件监听的元素或者它的子元素内
mousemove
指针在元素内移动时持续触发
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');
//当鼠标悬浮时触发
d.onmouseover = function(){
console.log('来了?');
}
//当鼠标离开时触发
d.onmouseout = function(){
console.log('不要啊');
}
//当鼠标按下时触发
d.onmousedown = function(){
console.log('用力啊');
}
//当鼠标弹起时触发
d.onmouseup = function(){
console.log('再来');
}
//当鼠标移动时触发
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');
//当键盘按下时触发
d.onkeydown = function(){
console.log('推到?');
}
//当键盘按下时触发
d.onkeypress = function(){
console.log('撩起2?');
}
//当键盘弹起时触发
d.onkeyup = function(){
console.log('撩起?');
}
</script>
keypress
除 Shift, Fn, CapsLock 外任意键被按住. (连续触发)
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');
//当表单提交时触发
d.onsubmit = function(){
alert('t');
}
//当表单重置时触发
d.onreset = function(){
alert('re');
}
</script>
change
当内容改变且失去焦点时触发 (存储事件)
input
当内容改变时触发 (值变化事件)
<body>
<input type="text" id="t" value="">
</body>
<script>
var d = document.getElementById('t');
//当内容改变且失去焦点时触发
d.onchange = function(){
console.log('t');
}
//当内容改变时触发
d.oninput = function(){
console.log('in');
}
</script>
猜你喜欢
.jpg)