event对象代表事件的状态,比如事件在其中发生的元素,键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用,函数不会在事件发生前被执行,只有当事件被触发的时候才会执行函数。
一、句柄事件
HTML5的新特性之一是能够使HTML事件触发浏览器中的行为,比如:当用户点击某个HTML元素时启动一段js代码。
作为属性可以有两种使用方式:
- 直接卸载HTML标签元素中
- 写在js中进行事件绑定 obj.οnclick=demo()
1、onclick事件
当用户用鼠标点击某个元素的时候触发onclick事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
.font{color:red}
</style>
</head>
<body>
<button onclick="demo()">点击弹出消息</button>
</body>
<script>
function demo(){
alert('这是一个弹出框');
}
</script>
</html>
2、onchange事件
在内容发生改变时将触发onchange事件,适用于所有的HTML标签元素,只要标签元素的内容发生改变就会触发这个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
.font{color:red}
</style>
</head>
<body>
<input type="radio" name="sex" value="男" onchange="demo(this)">男
<input type="radio" name="sex" value="女" onchange="demo(this)">女
</body>
<script>
function demo(obj){
alert('您选择的性别是:' + obj.value);
}
</script>
</html>
3、onresize事件
在窗口或框架调整大小时触发,这个事件在<body>中用的比较多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
.font{color:red}
</style>
</head>
<body onresize="demo()">
</body>
<script>
function demo(){
alert('窗口大小发生了变化');
}
</script>
</html>
4、onfocus事件 和 onblur事件
输入框获取和失去焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
.font{color:red}
</style>
</head>
<body>
<input type="text" onfocus="f()" onblur="b(this)">
</body>
<script>
function f(){
console.log('获取焦点事件');
}
function b(obj){
console.log('失去焦点,输入值为:' + obj.value);
}
</script>
</html>
5、ommouseover 和 onmouseout事件
鼠标移到某个元素和从某个元素上移开时触发的事件
``javascript
知数SEO_vx:zhishunet ```` #### 6、onsubmit事件 在点击submit按钮的时候被触发,这个事件写在
#### 2、screenX 和 screenY
#### 3、altKey、shiftKey、ctrlKey
#### 4、button
### 三、标准event属性和方法
#### 1、bubbles
#### 2、eventPhase
#### 3、currentTarget
#### 4、target
#### 5、preventDefault()
#### 6、stopPropagation