HTML DOM Event
HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
练习一、event及输入框
<input class="keyword" type="text" onfocus="func1();" onblur="func2()" value="请输入用户名" >
<script>
function func1(){
// alert(111)
var ky=document.getElementsByClassName("keyword")[0];
ky.value=""
}
function func2(){
// alert(222)
var ky=document.getElementsByClassName("keyword")[0];
if (ky.value.trim().length==0){
ky.value="请输入用户名"
}
}
</script>
练习二、事件延伸及阻止时间传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: chartreuse;
}
#div2{
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1" onclick="alert('div1')">div1
<div id="div2" onclick="func1(event)">div2</div>
</div>
<script>
function func1(e){
alert('div2');
e.stopPropagation()
}
</script>
</body>
</html>
练习三、增删演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">hello div2</div>
<p>hello p</p>
</div>
<input type="button" value="add" onclick="add()">
<input type="button" value="remove" onclick="remove()">
<script>
function add(){
var ele=document.getElementById('div1');
var son=document.createElement("p");
// son.innerHTML="i'm p"
son.innerText="XXXXX"
ele.appendChild(son)
}
function remove(){
var ele=document.getElementById('div1');
var last_son=ele.lastElementChild;
ele.removeChild(last_son);
}
</script>
</body>
</html>
练习四、js添加标签&属性
<div class="div1"> hello div </div> <input id="add" type="button" value="add" > <script> var ele=document.getElementById('add') ele.onclick=function(){ var div1=document.getElementsByClassName("div1")[0]; //添加标签; var img=document.createElement("img"); //标签添加属性 img.setAttribute("src","1.jpg"); div1.appendChild(img)
//img.src="1.jpg"
} </script>
练习五、模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } #div1{ position: fixed; width: 100%; top: 0; left: 0; height: 2000px; background-color: gainsboro; z-index: 1000; } #div2{ position: fixed; width: 100%; height: 200px; background-color: red; opacity: 0.1; z-index: 1001; top: 0; left: 0; right: 0; bottom: 0; } #div3{ height: 300px; width: 200px; background-color: aqua; position: absolute; top: 50%; left: 50%; z-index: 1002; margin-left: -100px; margin-top: -100px; } .hide{ display: none; } </style> </head> <body> <div id="div1"> <input type="button" value="click" onclick="show()"> </div> <div id="div2" class="hide div"></div> <div id="div3" class="hide div"> <input type="button" value="cncel" onclick="cncel()"></div> <script> function show(){ var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.remove("hide") } } function cncel(){ var ele=document.getElementsByClassName("div") for (var i=0;i<ele.length;i++){ ele[i].classList.add("hide") } } </script> </body> </html>
练习六、省市二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="province" onchange="func1(this)"> <!--<option value="sd">山东</option>--> <!--<option value="hb">河北</option>--> <!--<option value="nmg">内蒙古</option>--> </select> <select name="" id="city"> </select> <script> data={"河北":["衡水","承德"],"山东":["烟台","青岛"],"内蒙古":["呼伦贝尔","满洲里"]} //方式一： var pro=document.getElementById('province'); var city=document.getElementById('city') for (var i in data){ //创建option标签 var option_pro=document.createElement("option") option_pro.innerHTML=i; pro.appendChild(option_pro); } function func1(self){ //self.selectedIndex 取字典索引值 self.options 取option标签 innerhtml取标签里内容 // alert((self.options[self.selectedIndex]).innerHTML) var choice=(self.options[self.selectedIndex]).innerHTML; // var options=city.children; // for (var v=0;v<options.length;v++){ // city.removeChild(options[v--]); // } city.options.length=0 // console.log(data[choice]) for (var i in data[choice]){ var option_city=document.createElement("option") option_city.innerHTML=data[choice][i];//取出城市 city.appendChild(option_city) } } // function func1(){ // var ele=document.getElementById('province') // console.log(ele.value) // } </script> </body> </html>
