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
#### 2、screenX 和 screenY#### 3、altKey、shiftKey、ctrlKey#### 4、button### 三、标准event属性和方法#### 1、bubbles#### 2、eventPhase#### 3、currentTarget#### 4、target#### 5、preventDefault()#### 6、stopPropagation