JavaScript之事件
2018-03-02 本文已影响0人
追逐_chase
timg.jpg
事件
- 事件是浏览器处理的一种行为，或者是用户的一种行为
- 事件源：要触发的对象
- 事件：怎么触发的对象
-
事件处理程序：
事件.png
- oninput 判断用户输入事件
事件.png
事件源.事件 = function(){
事件处理函数
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="demo">
</div>
<button id="btn1" > 改变宽度</button>
<button id="btn2"> 改变颜色</button>
<script type="text/javascript">
var button = document.getElementById("btn1");
button.onclick = function () {
var demo = document.getElementById("demo")
demo.style.width = "300px"
demo.style.height = "450px"
}
var button2 = document.getElementById("btn2")
button2.onclick = function () {
var demo = document.getElementById("demo")
demo.style.backgroundColor = "red"
}
</script>
</body>
</html>
入口函数
window.onload = function () {
内放js
}
当页面加载完毕以后(结构，样式加载完)，执行这个函数里面的JS 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度换肤</title>
<style>
*{
padding: 0;
margin: 0;
}
body {
background: url("images/1.jpg") no-repeat top center;
}
#demo {
height: 200px;
background: rgba(255,255,255,.3);
text-align: center;
line-height: 200px;
}
img {
height: 100px;
margin-top: 50px;
}
</style>
<script>
window.onload = function () {
var pic1 = document.getElementById("pic1")
var pic2 = document.getElementById("pic2")
var pic3 = document.getElementById("pic3")
var pic4 = document.getElementById("pic4")
var pic5 = document.getElementById("pic5")
pic1.onclick = function () {
document.body.style.backgroundImage = "url(images/1.jpg)"
}
pic2.onclick = function () {
document.body.style.backgroundImage = "url(images/2.jpg)"
}
pic3.onclick = function () {
document.body.style.backgroundImage = "url(images/3.jpg)"
}
pic4.onclick = function () {
document.body.style.backgroundImage = "url(images/4.jpg)"
}
pic5.onclick = function () {
document.body.style.backgroundImage = "url(images/5.jpg)"
}
}
</script>
</head>
<body >
<div id="demo">
<img id="pic1" src="images/1.jpg" alt="">
<img id="pic2" src="images/2.jpg" alt="">
<img id="pic3" src="images/3.jpg" alt="">
<img id="pic4" src="images/4.jpg" alt="">
<img id="pic5" src="images/5.jpg" alt="">
</div>
</body>
</html>
换肤.jpg
模态窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body {
background-color: pink;
}
.div1{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.5);
display: none;
z-index: 1;
}
#btn {
margin: 0 auto;
width: 100px;
position: fixed;
top: 0;
left: 50%;
z-index: 0;
}
.div2 {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: aquamarine;
position: fixed;
left: 50% ;
top: 50%;
margin: -150px 0 0 -150px;
z-index: 2;
}
.div2 span {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
top: 15px;
right: 15px;
text-align: center;
line-height: 30px;
background-color: red;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var div11 = document.getElementById("div11");
var div12 = document.getElementById("div12");
btn.onclick = function () {
div11.style.display = "inline-block";
div11.style.zIndex = "5"
div12.style.display = "inline-block";
}
var span = document.getElementById("sspan");
span.onclick = function () {
div11.style.display = "none";
div12.style.display = "none";
}
}
</script>
</head>
<body>
<div id="btn">请登录</div>
<div class="div1" id="div11">
<div class="div2" id="div12">
<span ID="sspan">×</span>
</div>
</div>
</body>
</html>
模态.png
焦点的获取
- onfocus 获得焦点
- onblur 失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
.search {
width: 258px;
height: 40px;
margin: 100px auto;
background: pink;
}
.search input {
width: 208px;
height: 40px;
padding: 0;
padding-left: 8px;
color: #cccccc;
background: url("left.jpg") no-repeat;
float: left;
border: 0 none;
outline-style: none;
}
.search button {
height: 40px;
width: 42px;
background: url("right.jpg") no-repeat;
float: left;
cursor: pointer;
border: 0 none;
padding: 0;
}
</style>
<script>
window.onload = function () {
var txt = document.getElementById("txt");
txt.onfocus = function () {
if ( txt.value == "请输入...") {
txt.value = "";
txt.style.color = "#333";
}
}
txt.onblur = function () {
if (txt.value == ""){
txt.value = "请输入...";
txt.style.color = "#ccc";
}
}
}
</script>
</head>
<body>
<div class="search">
<input id="txt" type="text" value="请输入。。。">
<button></button>
</div>
</body>
</html>
search.jpg
this
- this 值自己本身， 事件的调用者
- className 类名
- innerHTML 更换 盒子里面的内容 文字 标签都换.
- Input.value 表单更换内容
- isNaN 是 不是一个数字
- Onfocus（） 是自动获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素提交</title>
<style>
.box {
margin: 100px auto;
text-align: center;
}
span {
display: inline-block;
border: 1px solid #cccccc;
width: 150px;
height: 20px;
font-size: 12px;
text-align: left;
padding-left: 20px;
color: #999;
background-color: #eee;
line-height: 20px;
}
.wrong {
background: url("images/wrong.png") no-repeat #FFDCD0 4px 3px;
border: 1px solid #FFAC91;
color: #FF6B39;
}
.right {
color: #5EFF5E;
background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
border: 1px solid #ACFFAC;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
$("txt").onblur = function () {
if (this.value == ""){
$("result").className = "wrong";
$("result").innerHTML = "请输入内容";
}else if (isNaN(this.value)){
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
$("result").style.color = "red";
} else if (this.value > 150 || this.value < 0){
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
$("result").style.color = "red";
} else {
$("result").className = "right";
$("result").innerHTML = "输入正确";
$("result").style.color = "red";
}
}
}
</script>
</head>
<body>
<div class="box">
语文： <input type="text" id="txt"> <span id="result">请输入成绩</span>
</div>
</body>
</html>
- oninput 判断用户输入事件 ，不过IE9以下的浏览器是不支持oninput事件的。
- onpropertychange 此属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<style>
.box {
width: 300px;
height: 30px;margin: 100px auto;
position: relative;
}
.box input {
width: 200px;
height: 25px;
}
.box label {
font-size: 12px;
color: #ccc;
position: absolute;
top: 8px;
left: 10px;
cursor: text;
}
</style>
<script>
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
$("txt").oninput =function () {
if (this.value == "") {
$("message").style.display = "block"
} else {
$("message").style.display = "none"
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" id="txt">
<label for="txt" id="message">国际大牌</label>
</div>
</body>
</html>
