5dom0级事件绑定.png
5dom0级事件绑定2.png
<body>
<button onclick="alert(1)">按钮1</button>
<button onclick="fun()">按钮</button>
<button id="btn">按钮3</button>
</body>
<script>
function fun(){
alert(2);
}
var btn=document.getElementById("btn");
btn.onclick=function (){ alert(3);}
</script>
5dom事件简介.png
5dom事件时有方法.png
5鼠标事件.png
5窗口事件属性.png
以上这三个都是window对象的方法
5js放在头部会有一些问题.png
代码是从上往下执行的，所以在执行js时找不到dom，这时可以用onload事件
5用onload事件.png
用onresize来做响应式网站很麻烦，用css3来做就简单很多，先试着做响应式：
<style>
.pro {
width: 18%;
height: 200px;
margin: 20px 1%;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="pro">box</div>
<div class="pro">box</div>
<div class="pro">box</div>
<div class="pro">box</div>
<div class="pro">box</div>
</body>
<script>
var pros = document.getElementsByClassName("pro");
window.onresize = function() {
var w = document.body.clientWidth;
if (w < 400) {
for (var i = 0; i < pros.length; i++) {
pros[i].style.width = "98%";
}
} else if (w < 900) {
for (var i = 0; i < pros.length; i++) {
pros[i].style.width = "31%";
}
}else{
for (var i = 0; i < pros.length; i++) {
pros[i].style.width = "18%";
}
}
};
</script>
onscroll事件并不是window对象独有的方法，div等等出现滚动条也行,
谁出现滚动条监听谁
window.onscroll=function(){}
myDiv.onscroll=function(){}
5表单事件.png
onfocus事件并不是鼠标点击输入框才触发，打开页面按tab键也能获取焦点；
onsubmit事件是在form上监听的，获取form的dom对象进行监听，在用户点击submit按钮提交表单时，触发事件
<body>
<form action="" id="myform">
<input type="text">
<input type="submit" value="提交">
</form>
</body>
<script>
myform.onsubmit=function(){
//这时就可以检查用户的输入是否合法
return false;
// return false就可以阻止提交
}
</script>
onchange可以应用到多个元素上
比如checkbox手动勾选或是后期通过程序去改变他，都能触发onchange事件
<body>
<input type="checkbox" name="" id="checkbox">
<select name="" id="select">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
</body>
<script>
checkbox.onchange=function (){
console.log(checkbox.checked);
//勾选取消能得到true 或是false
}
select.onchange=function(){
console.log(select.value);
}
</script>
5表单事件tabindex.png
鼠标事件还有：
onclick
ondblclick
onmousedown-----onmouseup
onmouseenter-----onmouseleave
onmouseover------onmouseout
onmousemove
小练习：点击让div的背景颜色来回切换
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
var x = 0,flag=false;
myDiv.onclick = function() {
// flag=!flag;
x++;
if (x % 2) {//if(flag)
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "red";
}
};
</script>
原生js实现简单轮播图
<style>
#myDiv {
width: 200px;
height: 200px;
border: 2px solid red;
}
#myDiv img {
width: 200px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="../img/3HTMLDOM树.png" alt="" />
<img src="../img/3HTMLDOM树访问.png" alt="" />
<img src="../img/3查找元素.png" alt="" />
<img src="../img/3查找元素2.png" alt="" />
</div>
<button class="pre">上一张</button>
<button class="next">下一张</button>
</body>
<script>
var img = document.getElementsByTagName("img");
img[0].style.display = "block";
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
var cur = 0;
next.onclick = function() {
img[cur].style.display = "none";
cur = ++cur > 3 ? 0 : cur;
img[cur].style.display = "block";
};
pre.onclick = function() {
img[cur].style.display = "none";
cur = --cur < 0 ? 3 : cur;
img[cur].style.display = "block";
};
</script>
这样通过obj.style.属性=xxx,这种通过js来改变css样式还是比较麻烦，可以直接在css中写好你想变成的样式，再给他添加类名的方式会比较简单：
.con {
width:100px;
height:100px;
}
box.className="con"
原生实现添加和移除类名：
<body>
<div class="box1">box</div>
</body>
<script>
var myDiv=document.getElementsByClassName("box1")[0];
function addClass(obj,name){
obj.className+=" "+name;
}
function removeClass(obj,name){
var oldArr=obj.className.split(" ");
for(var i=oldArr.length-1;i>=0;i--){
if(oldArr[i]==name){
oldArr.splice(i,1);
}
}
obj.className=oldArr.join(" ");
}
function toggleClass(obj,name){
var flag=true;
var oldArr=obj.className.split(" ");
for(var i=oldArr.length-1;i>=0;i--){
if(oldArr[i]==name){
removeClass(obj,name);
flag=false;
break;
}
}
if(flag){
addClass(obj,name);
}
}
addClass(myDiv,"box2");
addClass(myDiv,"box2");
addClass(myDiv,"box3");
removeClass(myDiv,"box2");
toggleClass(myDiv,"box3");
</script>
