鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: yellow;
}
#child {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box">
<!-- 子元素 -->
<div id="child">
</div>
</div>
<script>
/* onmouseenter:鼠标进入被选元素时会触发onmouseenter事件
onmouseover:鼠标进入被选元素或者它的任意子元素时都会触发onmouseover事件
onmouseenter通常与onmouseleave一起用,onmouseover和onmouseout一起用
onmouseleave:鼠标离开被选元素时触发
onmouseout:鼠标离开被选元素或者它的任意子元素时都会触发
* */
var box = document.getElementById('box');
var child = document.getElementById('child');
box.onmouseenter = function() {
console.log("鼠标进入--onmouseenter");
}
box.onmouseover = function() {
console.log("鼠标进入--onmouseover");
}
box.onmouseleave=function(){
console.log("鼠标离开--onmouseleave");
}
box.onmousemove=function(){
console.log("鼠标移动--onmousemove");
}
/* 鼠标按下时触发 */
box.onmousedown=function(){
console.log('鼠标被按下了');
}
/* 鼠标松开时触发 */
box.onmouseup=function(){
console.log('鼠标松开了');
}
</script>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* 键盘事件：是在键盘的按键上触发的事件
* 键盘事件的事件源:body或者document元素
* console.log("按键被按下了"); onkeydown:键盘的按键被按下时触发
* onkeyup:按键松开时触发
*/
document.body.onkeydown=function(){
console.log("按键被按下了");
}
document.body.onkeyup=function(){
console.log("按键被松开了");
}
</script>
</body>
</html>
event事件对象_属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* event事件对象：这个对象是结合键盘事件使用的，将它传到键盘事件的响应函数中
*event对象的属性 ctrlKey：判断键盘事件触发时是否按下了Ctrl键
* event事件对象也可以跟鼠标事件一起使用
* clientX属性：获取鼠标指针相对于窗口客户区域的 x 坐标
* clientY属性：获取鼠标指针相对于窗口客户区域的 Y坐标
*
* onmousemove:鼠标指针在元素上移动时触发的事件，可以在这个事件中获取鼠标指针的x和y坐标
* onmousemove事件一般加在document对象上
* keyCode：获取按键的ascii值
*/
document.body.onkeydown=function(event){
var f= event.ctrlKey;
console.log("按键被按下了"+f);
}
document.body.onkeyup=function(){
console.log("按键被松开了");
}
document.onmousemove=function(event){
var x= event.clientX;
var y=event.clientY;
console.log('鼠标指针的x坐标：'+x+",y坐标："+y);
}
document.body.onkeydown=function(event){
//获取按键的ascii码值，就是一个数字
//常用的几个ascii:
//回车键---13 左键--37 右键--38 上键--39 下键--40
var code= event.keyCode;
console.log('按键的ascii：'+code);
}
</script>
</body>
</html>
event对象的方法–阻止事件冒泡和阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
width: 200px;
height: 200px;
background-color: yellow;
}
#child {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<a href="http://www.baidu.com" id="link">百度一下，你就知道</a>
<script>
/* 事件冒泡:当事件发生时,事件源会把该事件由下向上(由内向外)传播出去(事件派发),此时它的父元素也触发了该事件,
* 并执行相应的事件处理函数
* evvent
event.stopPropagation()：阻止事件冒泡
event.preventDefault():阻止事件的默认行为
**/
var parent=document.getElementById('parent');
var child=document.getElementById('child');
//给子元素添加事件
child.onclick=function(event){
console.log('onlick事件,child');
//阻止事件冒泡
event.stopPropagation();
}
//给父元素parent添加事件
parent.onclick=function(event){
console.log('onlick事件,parent');
//阻止事件冒泡
event.stopPropagation();
}
document.body.onclick=function(){
console.log('onlick事件,body');
}
var link=document.getElementById('link');
link.onclick=function(event){
//阻止超链接的单击事件的默认跳转行为
event.preventDefault();
}
</script>
</body>
</html>
表单的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" id="form">
用户名： <input type="text" name="username" id="uname" placeholder="请输入用户名..."> <br>
密码： <input type="password" name="password" placeholder="请输入密码..."> <br>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" id="btn" value="普通按钮提交表单" />
</form>
<script>
/* onsubmit:是提交表单时就会自动触发onsubmit事件
onreset:是重置表单时会自动触发onreset事件
不需要给提交按钮添加单击事件
如果需要给表单中的数据做验证，就直接把验证的代码写到onsubmit事件的响应函数中
在onsubmit事件中做js验证时，如果要阻止表单提交，可以写event.preventDefault();或者 return false;
提交表单可以用提交按钮来提交(点击提交按钮，默认就会提交表单)，也可以用普通按钮
普通按钮提交表单的步骤：
1.给普通按钮添加单击事件
2.在单击事件中调用表单的submit()方法，该方法会自动的去提交表单，如果要做js验证，就把验证代码写到普通按钮的onclick事件中
注意：
如果是用提交按钮提交表单，不需要做js验证，那么就不用写表单的onsubmit事件；
如果是用普通按钮提交表单，不需要做js验证，那么不能省略按钮的onclick事件，只需要在onclick事件的响应函数中写 form.submit();
* */
//获取表单
var form=document.getElementById('form');
form.onsubmit=function(event){
//console.log('表单被提交了');
//当用户名的长度少于6时，不符合要求，要求：用户名的长度至少是6位
var uname= document.getElementById('uname').value;
if(uname.length<6){
console.log('用户名至少要6位');
//不符合要求，阻止表单提交
//event.preventDefault();
return false;
}
//允许表单提交
}
//获取普通按钮
var btn=document.getElementById('btn');
//给按钮添加单击事件
btn.onclick=function(){
var uname= document.getElementById('uname').value;
if(uname.length<6){
console.log('用户名至少要6位');
return;
}
//提交表单
form.submit();
}
</script>
</body>
</html>
