Js-三大事件（滑鼠事件、鍵盤事件、html事件）
阿新 • • 發佈：2018-12-31
滑鼠事件
click：單擊
dblclick：雙擊
mousedown：滑鼠按下
mouseup：滑鼠擡起
mouseover：滑鼠懸浮
mouseout：滑鼠離開
mousemove：滑鼠移動
mouseenter：滑鼠進入
mouseleave：滑鼠離開
<button onclick="myClick()">滑鼠單擊</button> <button ondblclick="myDBClick()">滑鼠雙擊</button> <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">滑鼠按下和擡起</button> <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">滑鼠懸浮和離開</button> <button onmousemove="myMouseMove()">滑鼠移動</button> <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">滑鼠進入和離開</button>
鍵盤事件 keydown：按鍵按下 keyup：按鍵擡起 keypress：按鍵按下擡起<script> function myClick() { console.log("你單擊了按鈕！"); } function myDBClick() { console.log("你雙擊了按鈕！"); } function myMouseDown() { console.log("滑鼠按下了！"); } function myMouseUp() { console.log("滑鼠擡起了！"); } function myMouseOver() { console.log("滑鼠懸浮！"); } function myMouseOut() { console.log("滑鼠離開！") } function myMouseMove() { console.log("滑鼠移動！") } function myMouseEnter() { console.log("滑鼠進入！") } function myMouseLeave() { console.log("滑鼠離開！") }
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>HTML事件 load：文件載入完成 select：被選中的時候 change：內容被改變 focus：得到游標 resize：視窗尺寸變化 scroll：滾動條移動<script> /*輸出輸入的字元*/ function myKeyDown(id) { console.log(document.getElementById(id).value); } /*按鍵結束，字型轉換為大寫*/ function myKeyUp(id) { var text = document.getElementById(id).value; document.getElementById(id).value = text.toUpperCase(); } </script>
<body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body><script>
window.onload = function () {
console.log("文件載入完畢！");
};
/*window.onunload = function () {
alert("文件被關閉！");
};*/
/*列印選中的文字*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*內容被改變時*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到游標*/
function myFocus() {
console.log("得到游標！");
}
/*視窗尺寸變化*/
window.onresize = function () {
console.log("視窗變化！")
};
/*滾動條移動*/
window.onscroll = function () {
console.log("滾動");
}
</script><body>
<!--指令碼模型：行內繫結-->
<button onclick="alert('hello')">hello</button>
<!--內聯模型-->
<button onclick="showHello()">hello2</button>
<!--動態繫結-->
<button id="btn">hello3</button>
</body><script>
function showHello() {
alert("hello");
}
/*DOM0：同一個元素只能新增一個同類事件
* 如果新增多個，後面的會把前面的覆蓋掉*/
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
};
btn.onclick = function () {
alert("hello world");
};
/*DOM2:可以給一個元素新增多個同類事件*/
btn.addEventListener("click", function () {
alert("hello1");
});
btn.addEventListener("click", function () {
alert("hello2");
});
/*不同瀏覽器的相容寫法*/
/*IE*/
if (btn.attachEvent) {
btn.attachEvent("onclick", function () {
alert("hello3");
});
/*W3C*/
} else {
btn.addEventListener("click", function () {
alert("hello4");
})
}
</script> <style>
#div1{
width: 400px;
height: 400px;
background-color: #0dfaff;
}
#div2{
width: 300px;
height: 300px;
background-color: #33ff66;
}
#div3{
width: 200px;
height: 200px;
background-color: #fff24a;
}
#div4{
width: 100px;
height: 100px;
background-color: #ff4968;
}
</style> <title>事件冒泡、事件捕獲</title>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
</div>
</body><script>
var div1 = document.getElementById("div1");
div1.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div1");
},false);
var div2 = document.getElementById("div2");
div2.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div2");
},false);
var div3 = document.getElementById("div3");
div3.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div3");
},false);
var div4 = document.getElementById("div4");
div4.addEventListener("click",function (event) {
/*阻止事件冒泡*/
event.stopPropagation();
alert("div4");
},false);
</script><body>
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body><script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
alert("不跳轉！")
}
</script>