HTML事件<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container{
height: 800px;
background-color: red;
}
</style>
<!--<script>
function loaded() {
var name1 = document.getElementById("name");
name1.onclick = function () {
alert("洗刷刷");
}
};
</script>-->
<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("文档加载完毕！");
};
/*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("窗口变化！")
};
var name1 = document.getElementById("name");
name1.onclick = function () {
alert("洗刷刷");
};
window.onscroll = function (){
console.log("滚动条滚动");
}
</script>
</html>
结果图：
得到括号内的效果
事件模型<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件模型</title>
</head>
<body>
<!--脚本模型：行内绑定-->
<button onclick="javascript:alert(‘Hello‘)">Hello</button>
<!--内联模型-->
<button onclick="showHello()">Hello！</button>
<!--动态绑定-->
<button id="btn">Hello1！</button>
</body>
<script>
function showHello() {
alert("Hello！")
}
var btn = document.getElementById("btn");
/*DOM0：同一个元素，同类事件只能添加一个，
如果添加多个，后面添加的会覆盖之前添加的*/
/*btn.onclick = function () {
alert("Hello1!");
};*/
/*DOM2:可以给同一个元素添加多个同类事件*/
/*btn.addEventListener("click",function () {
alert("Hello")
});
btn.addEventListener("click",function () {
alert("Hello1!")
});*/
/*不同浏览器的兼容写法*/
if (btn.attachEvent){/*IE*/
btn.attachEvent("onclick",function () {
alert("IE Hello")
});
}else{ /*W3C*/
btn.addEventListener("click",function () {
alert("W3C Hello")
});
}
</script>
</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: darkcyan;
}
#div4{
width: 100px;
height: 100px;
background-color: darkorange;
}
</style>
<title>事件冒泡</title>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
</div>
</body>
<script>
/*事件冒泡：子元素的事件发生以后，会引发父元素同类事件
* 事件捕获：在参数function后面加上参数true；事件的触发方式是从父元素网子元素*/
var div1 = document.getElementById("div1");
div1.addEventListener("click",function () {
alert("div1");
});
var div2 = document.getElementById("div2");
div2.addEventListener("click",function () {
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>
结果图：
阻止默认事件<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="stopA(event)">百度</a>
</body>
<script>
function stopA(event) {
if(event.preventDefault()){
event.preventDefault(); /*w3c*/
}else {
event.returnValue = false; /*IE*/
}
event.preventDefault();
alert("老子就是不让你跳转！")
}
</script>
</html>
结果图：
时间： 2024-11-05 12:32:53