JavaScript(15)常用事件

  • onload事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>


<script>
window.onload = function (){
ele = document.getElementById("i1")
console.log(ele.innerHTML);
}
</script>

</head>
<body>

<div id="i1">yuan</div>

</body>
</html>
  • onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>

<form action="" id="i1">
用户名：<input type="text">
密码： <input type="password">
<input type="submit">
</form>


<script>

var ele = document.getElementById("i1");
var user = document.querySelector("#i1 [type=text]")
var pwd = document.querySelector("#i1 [type=password]")
ele.onsubmit = function (e){
console.log(user.value);
console.log(pwd.value);

return false; // 终止事件执行
// e.preventDefault() // 阻止元素默认行为
}

</script>
</body>
</html>

  • onchange事件

  • onmouse事件

  • onkey事件

  • onblur和onfocus事件

  • 冒泡事件

<div class="c1">
<div class="c2"></div>
</div>


<script>

var ele1 = document.querySelector(".c1");
ele1.onclick = function () {
alert("c1区域")
};

var ele2 = document.querySelector(".c2");
ele2.onclick = function (event) {
alert("c2区域");

// 如何阻止事件冒泡
event.stopPropagation();
}

</script>
posted @ 2021-11-22 19:43  下个ID见  阅读(11)  评论(0)    收藏  举报