事件基础（事件三要素、事件操作步骤、常见的事件）和操作元素

最新推荐文章于 2022-07-18 22:54:11 发布

可爱迷人的反派角色&

最新推荐文章于 2022-07-18 22:54:11 发布

阅读量2.2k

点赞数

分类专栏： js基础入门文章标签： java 服务器前端

本文链接：https://blog.csdn.net/m0_61973028/article/details/125433535

版权

js基础入门专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件：是可以被js侦测到的行为。

事件三要素：事件源事件类型事件处理程序

案例：

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

执行事件步骤：获取事件源注册事件添加事件处理程序

案例：

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

操作元素：元素内容样式属性表单元素的属性

元素内容的改变以下二者都能读写

1、元素名.innerText = ‘’；不能识别空格、标签、回车等，只能识别内容

2、元素名.innerHTML = ‘’；可以识别所有。

样例：

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

样式属性操作

案例：

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。

<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';

// 2. 我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>