学习周记 Week9
1.学习目标
掌握DOM事件
2.学习内容
2.1 onload 和 onunload 事件
onload:进入页面
onunload:离开页面
*onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
**onload 和 onunload 事件可用于处理 cookie
例:
简单的网页弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
</html>
运行结果:
当修改网页信息后:
判定结果不为真
运行结果:
2.2 onchange 事件
onchange 事件常结合对输入字段的验证来使用
例:
当你离开输入框后,函数将被触发,将小写字母转为大写字母
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
</body>
</html>
2.3 onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
例:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
前:
后:
2.4 onmousedown、onmouseup事件
当点击鼠标按钮时,会触发 onmousedown 事件,
当释放鼠标按钮时,会触发 onmouseup 事件
例:
鼠标按下时更换字体背景色,抬起时还原默认颜色
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色,抬起时还原默认颜色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function downClick(){
var dd=document.getElementById("dd");
dd.style.background="red";
}
function upClick(){
var dd=document.getElementById("dd");
dd.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="xuexi"></div>
</body>
</html>
前:
后:
2.5 事件冒泡/捕获
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 < p> 元素插入到 < div> 元素中,用户点击 < p> 元素, 哪个元素的 “click” 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: < p> 元素的点击事件先触发,然后会触发 < div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: < div> 元素的点击事件先触发 ,然后再触发 < p> 元素的点击事件。
例:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时,冒泡与捕获的不同。</p>
<div id="myDiv">
<p id="myP">点击段落,我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击段落,我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV2 元素 !");
}, true);
</script>
</body>
</html>
点击段落1
点击段落2
3.练习
3.1 全选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
selAll = document.getElementById("selAll");
hobbys = document.getElementsByName("hobby");
fx = document.getElementById("fx");
//全选事件
selAll.onclick = function(){
//全选
if(selAll.checked == true){
for (var i=0;i<hobbys.length;i++) {
hobbys[i].checked = true;
}
}else{
for (var i=0;i<hobbys.length;i++) {
hobbys[i].checked = false;
}
}
}
//反选
fx.onclick = function(){
for (var i=0;i<hobbys.length;i++) {
var b = hobbys[i];
if(b.checked == true){
b.checked = false;
}else{
b.checked = true;
}
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="" id="selAll" />全选
<button id="fx">反选</button>
<br>
<input type="checkbox" name="hobby" />demo1
<input type="checkbox" name="hobby" />demo2
<input type="checkbox" name="hobby" />demo3
<input type="checkbox" name="hobby" />demo4
</body>
</html>
运行结果:
3.2 循环提示框
3.2.1 循环出现提示框5次
代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
window.onload=function ()
{
var aBtn1=document.getElementById('button1');
aBtn1.onclick=function ()
{
var i=0;
while(i<5)
{
alert('这是第'+(i+1)+'次弹出');
i++;
}
}
var aBtn2=document.getElementById('button2');
aBtn2.onclick=function ()
{
var aSpn3=document.getElementById('div3').getElementsByTagName('span');
for(var i=0;i<aSpn3.length;i++)
{
aSpn3[i].style.background='yellow';
}
}
var aBtn3=document.getElementById('button3');
aBtn3.onclick=function ()
{
var aDiv3=document.getElementById('div4').getElementsByTagName('div');
if(aDiv3[0].style.background=='yellow')
{
var i=0;
while(i<aDiv3.length)
{
aDiv3[i].style.background='';
aDiv3[i].style.height='';
aDiv3[i].style.width='';
i=i+1;
}
}
else
{
for(var i=0;i<aDiv3.length;i++)
{
aDiv3[i].style.background='yellow';
aDiv3[i].style.height='150px';
aDiv3[i].style.width='50%';
}
}
}
}
</script>
</head>
<BODY>
<div class="box box-re">
<p><button id="button1" type="button">循环出现提示框5次</button></p>
</div>
</BODY>
</HTML>
3.2.2弹出一个提示框,今天你学习了吗?如果输入学习了,就提示结束,否则,一直询问
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
// 弹出一个提示框,今天你学习了吗?如果输入学习了,就提示结束,否则,一直询问
var message=prompt('今天你学习了吗?');
while(message!=='学习了'){
message=prompt('今天你学习了吗?');
}
alert('离优秀又进了一步!');
</script>
</body>
</html>
3.3 隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
height: 30px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oli = document.getElementsByTagName("li");
var i= 0;
setInterval(function(){
i++;
if(i%2==0){
for(var j=0;j<oli.length;j++){
if(j%2==0){
oli[j].style.background = "red";
}else{
oli[j].style.background = "blue";
}
}
}else{
for(var j=0;j<oli.length;j++){
if(j%2==0){
oli[j].style.background = "blue";
}else{
oli[j].style.background = "red";
}
}
}
},1000)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
3.4 判断是否为两位数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var input = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('button')[0];
input.onkeyup = function (){
this.value = this.value.replace(/[^\d]/,"")
}
btn.onclick = function() {
var arr = input.value.split('');
if(arr.length == 2){
alert('√这是2位数');
}else{
alert('这是'+arr.length+"位数");
}
}
}
</script>
<body>
<div class = 'outer'>
<input type = 'text'>
<button>是否为两位数</button>
</div>
</body>
</html>