了解Dom0级事件
ul事件:
<img src="img/1.jpg" alt="" id="img"><script>
//Dom 0级事件 所有的事件前面必须加入"on"
//ui事件 load页面预加载事件 所有在load事件中的代码都会在html页面加载完毕后才会执行。
window.onload=function() {
//页面预加载事件 在头部js 需用预加载事件
img.onclick=function() {
alert("单击了")
}
};
//ul resize浏览器窗口改变事件
window.onresize=function() {
alert("窗口发生改变了");
};
//scroll 滚动条事件
window.onscroll=function() {
// console.log("滚动条事件触发了");
var num=document.documentElement.scrollTop;//滚动条距离浏览器顶部的距离
console.log(num);
}//京东导航就是 (var 滚动条距离>740 ;回到顶部搜索框的位置; <740 顶部导航条隐藏)
//京东侧边栏的导航条 就是利用滚动条的距离 实现位置字体变色；
</script>键盘事件:
<button>按钮</button><script>
var body=document.body;
//键盘按下事件
//空格:32 回车:13 上:38 右:39 下:40 左:37
body.onkeydown=function(e) {
//console.log(e.keyCode);//键盘按下code码;
};
//键盘弹起事件
body.onkeyup=function(e) {
if(e.keyCode==13&&e.ctrlKey&&e.shiftKey){
//回车 ctrl键 shift键 （同时按下 发送成功）
alert("发送成功");
}
};
//键盘字符键事件 (所有的功能键无效 ctrl shift...)
body.onkeypress=function(e) {
console.log(e.keyCode);
}
</script>鼠标事件:
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
</ul><script>
var ul=document.getElementsByTagName("ul");
var lis=document.getElementsByTagName("li");
//鼠标按下事件
lis[0].onmousedown=function() {
this.style.background="red";
};
//鼠标松开事件
lis[1].onmouseup=function() {
this.style.background="blue";
console.log("鼠标松开了");
};
//鼠标移入事件 ；只有在移入的一瞬间触发
lis[2].onmouseover=function() {
this.style.background="green";
};
//鼠标移出事件；只有在移出的一瞬间触发
lis[3].onmouseout=function() {
this.style.background="yellow";
};
//鼠标移动事件 ;只要在元素内部持续不断的移动就会持续触发
lis[4].onmousemove=function() {
this.style.background="#0f0";
console.log("我移动事件触发了")
};
//1.按下 2.移动 3.松开 （一个拖拽效果实现）
//鼠标移入事件 ；只有在移入的一瞬间触发 会产生捕获和冒泡
lis[5].onmouseenter=function() {
};
//鼠标移出事件 ；只有在移出的一瞬间触发 会产生捕获和冒泡
lis[6].onmouseleave=function() {
};
//获取鼠标当前 x轴和 y轴的坐标
lis[7].onclick=function(e) {
console.log(e);
var x= e.clientX;//获取鼠标当前的x轴坐标
var y=e.clientY;//获取鼠标当前的y轴坐标
console.log(x);
console.log(y);
}
</script>表单事件:
<form action="">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="reset">
<input type="submit">
</form><script>
//在所有事件中:--放大和--多级联动和--瀑布流布局====最难
var ipt=document.getElementsByTagName("input");
var fm=document.getElementsByTagName("form")[0];
//获得焦点事件 焦点:眼睛所注视的地方
ipt[0].onfocus=function() {
//条件:从没有焦点到有焦点触发
console.log("我获得了焦点");
};
//失去焦点事件
ipt[1].onblur=function() {
//条件:从可以输入到无法输入时触发
console.log("我失去了焦点");
};
//选择中事件
ipt[2].onselect=function() {
//条件:选中文本框里面的内容的时候 才会被触发事件
console.log("我被选中了");
};
//改变事件 最常用的例子:多级联动事件（--省--市--区) 进行判断
ipt[3].onchange=function() {
//条件:从内容发生改变并且失去焦点之后 触发该事件
console.log("我被改变了")//条件:只有在原先的基础上进行改变 才会被触发
};
//重置事件
fm.onreset=function() {
console.log("我被重置了")
};
//提交事件
fm.onsubmit=function() {
alert("成功了");
}
</script>