事件方法
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
两种为元素附加事件属性的方式
<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
</script>
ondblclick & onfocus & onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p ondblclick="alert(123)">ppppp</p>
<input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名">
<input type="text">
<script>
function func1() {
// console.log(111)
var ky=document.getElementsByClassName("keyword")[0];
ky.value="";
}
function func2() {
var ky=document.getElementsByClassName("keyword")[0];
if (ky.value.trim().length==0){ //字符串去掉空格
ky.value="请输入用户名";
}
}
</script>
</body>
</html>
onpress onkeydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" >
<!--<input type="button" value="press2" onkeyup="fun2(event)">-->
<script>
function fun1(e) {
console.log(456);
alert(e.keyCode);//键盘按键对应的编码
}
function fun2() {
console.log(123)
}
</script>
</body>
</html>
onload方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun1() {
var p=document.getElementById("id1")
alert(p.nodeName);
}
// window.onload=function () {
// var p=document.getElementById("id1")
// alert(p.nodeName);
// }
</script>
</head>
<body onload="func1()"> //等同于上述 window.onload,HTML文件(或图片)加载完全后触发该方法
<p id="id1">hello p</p>
</body>
</html>
onmouse方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
background-color: #84a42b;
width: 200px;
}
</style>
</head>
<body>
<div onmousedown="down()" onmousemove="move()" >div1</div>
<script>
function down() {
console.log("down"); //鼠标点击区域后
}
function move() {
console.log("move"); //鼠标在该区域内移动
}
function out() {
console.log("out"); //鼠标离开该区域后
}
function over() {
console.log("over");//鼠标进入该区域后
}
</script>
</body>
</html>
onsubmit提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//onsubmit必须在form标签中
//<...onsubmit="return check()"> check()函数 return false
<form id="form" onsubmit="return check(event)">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
function check(event) {
alert("验证失败！");
//return false;
event.preventDefault(); //阻止事件提交
}
//第二种：
var Form=document.getElementById("form");
Form.onsubmit=function (event) {
alert(123);
return false;
// event.preventDefault();
};
</script>
</body>
</html>
View Code事件绑定的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//事件绑定方式一
<div id="div1" onclick="func1()">hello duv
<p class="ppp">hello p</p>
</div>
<script>
//事件绑定方式二
var obj=document.getElementsByClassName("ppp")[0];
obj.onclick=function () {
alert(123);
}
function func1(){
alert("func1")
}
</script>
</body>
</html>
View Code
阻止事件向下一级传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: #84a42b;
}
#div2{
height: 100px;
width: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1" onclick="alert('div1')">
<div id="div2" onclick="func1(event)"></div>
</div>
<script>
function func1(e) {
alert('div2');
e.stopPropagation();//阻止事件向下一级传递
}
</script>
</body>
</html>
View Code