JavaScript DOM属性和方法之event事件对象_html


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