HTMLdom和COREdom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMLdom</title>
</head>
<body>
<table id="myTable" border="1" width="400px" height="100px" style="border-collapse: collapse">
<tr>
<td>书名</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="tr1">
<td>看的见风景的房间</td>
<td>¥30</td>
<td>
<button onclick="removeRow(this)">删除</button>
</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td>¥18.5</td>
<td>
<button onclick="removeRow(this)">删除</button>
</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>¥32</td>
<td>
<button onclick="removeRow(this)">删除</button>
</td>
</tr>
</table>
<button onclick="insert1()">增加一行</button>
<button onclick="delete2()">删除第2行</button>
<button onclick="changeTitle()">修改标题</button>
</body>
<script>
function insert1() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "钢铁是怎样炼成的";
cell2.innerHTML = "$50";
}
function delete2() {
var table = document.getElementById("myTable");
table.deleteRow(1);
}
function changeTitle() {
var table = document.getElementById("myTable");
table.rows[0].cells[0].align = "center";
table.rows[0].cells[1].align = "center";
}
function removeRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTable");
table.deleteRow(index);
}
</script>
</html>
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
<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>
</body>
<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("鼠标离开!")
}
</script>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<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>
</html>
HTML事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container{
height: 1000px;
background-color: aqua;
}
</style>
<title>HTML事件</title>
</head>
<body onload="loaded()">
<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()">
<div id="container"></div>
</body>
<script>
window.onload = function () {
console.log("文档加载完毕!");
};
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("窗口变化!")
};
var name1 = document.getElementById("name");
name1.onclick = function () {
alert("洗刷刷");
};
window.onscroll = function () {
console.log("滚动条滚动")
}
</script>
</html>
事件模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件模型</title>
</head>
<body>
<button onclick="javascript:alert('Hello')">Hello!</button>
<button onclick="showHello()">Hello2!</button>
<button id="btn3">Hello3!</button>
</body>
<script>
function showHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
if (btn3.attachEvent()) {
btn3.attachEvent("onclick", function () {
alert("IE hello")
});
} else {
btn3.addEventListener("click", function () {
alert("W3C hello")
})
</script>
</html>
事件冒泡及捕获以及阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1 {
width: 400px;
height: 400px;
background-color: red;
}
#div2 {
width: 300px;
height: 300px;
background-color: yellow;
}
#div3 {
width: 200px;
height: 200px;
background-color: blue;
}
#div4 {
width: 100px;
height: 100px;
background-color: #4D2E83;
}
</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 () {
alert("div1")
});
var div2 = document.getElementById("div2");
div2.addEventListener("click", function (event) {
event.stopPropagation();
alert("div2")
});
var div3 = document.getElementById("div3");
div3.addEventListener("click", function (event) {
event.stopPropagation();
alert("div3")
});
var div4 = document.getElementById("div4");
div4.addEventListener("click", function (event) {
event.stopPropagation();
alert("div4")
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<a href="https://www.baidu.com" onclick="stopA(event)">baidu</a>
</body>
<script>
function stopA(event) {
if (event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
alert("就是不让你跳转!!")
}
</script>
</html>