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

知数SEO

已于 2024-01-29 21:47:38 修改

阅读量297

点赞数 3

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-01-28 21:49:29 首次发布

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135901191

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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

知数SEO

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript DOM属性和方法之event事件对象

event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态、鼠标的位置、鼠标按钮的状态，事件通常与函数结合使用，函数不会在事件发生前被执行，只有当事件被触发的时候才会执行函数。
复制链接

扫一扫