事件

最新推荐文章于 2023-10-03 21:29:43 发布
最新推荐文章于 2023-10-03 21:29:43 发布
阅读量187 收藏
点赞数
文章标签： chrome javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Orangeio/article/details/131732938
版权

事件监听

1、获取元素
2、添加事件监听

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .yincang {
            display: none;
        }
    </style>
</head>

<body>
    <button>切换</button>
    <div class="yincang"></div>
    <script>
        // 1、获取元素
        const btn = document.querySelector('button')
        const box = document.querySelector('div')
        // 2、添加事件监听
        btn.addEventListener('mouseenter', () => {
            // console.log('1111')
            box.classList.toggle('yincang')----切换类名
        }, true)

    </script>
</body>

事件类型
鼠标点击 click
鼠标经过 mouseenter
鼠标离开 mouseleave
获得焦点 focus
失去焦点 blur
键盘按下事件 keydown
用户输入事件 input

事件绑定

1、获取元素
元素.on事件名 = 回调函数

<body>
    <button>点击</button>
    <script>
        // 1、获取元素
        let btn = document.querySelector('button')
        
        // e.on事件名 = 回调函数
        btn.onclick = function () {
            // console.log('111')
            btn.style.backgroundColor = 'pink'
        }
    </script>
</body>

常见事件

<body>
    <!--  -->

    <script>
        document.addEventListener('keyup', function (e) {
            // console.log(e)
            // console.log('1111')
            if (e.key === 'Enter') {
                console.log('我要发布微博了')
            }
        })
    </script>
</body>

事件委托

儿子事件委托给父亲
=>箭头函数没有this

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
    <script>
        let li1 = document.querySelector('ul li:nth-child(1)')
        li1.addEventListener('click', function () {
            this.style.backgroundColor = 'pink'
        })
    </script>
</body>

请添加图片描述

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (key) {
            console.log(key)
            key.target.style.backgroundColor = 'pink'
        })

    </script>
</body>

请添加图片描述

捕获、冒泡

<style>
        .grandfather {
            width: 1200px;
            height: 1200px;
            background-color: aqua;
        }

        .father {
            width: 800px;
            height: 800px;
            background-color: pink;
        }

        .son {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <script>
        document.querySelector('.grandfather').addEventListener('click', (e) => {
            console.log('我是yeye')
            e.stopPropagation()
        }, true)
        // 默认为false冒泡    true捕获
        document.querySelector('.father').addEventListener('click', (e) => {
            console.log('我是父亲')
            e.stopPropagation()
        }, true)
        document.querySelector('.son').addEventListener('click', () => {
            console.log('我是儿子')
        }, true)
    </script>
</body>

阻止默认行为

默认行为

<form action="#">
        <input type="text" name="uname" id="">
        <button>tijaio</button>

阻止默认行为e.preventDefault

<body>
    <form action="#">
        <input type="text" name="uname" id="">
        <button>tijaio</button>
    </form>

    <script>
        document.querySelector('button').addEventListener('click', (e) => {
            e.preventDefault()
        })
    </script>
</body>

lode事件

在页面或某个资源加载成功时触发
外面所有东西加载完成后再执行里面的

<script>

        window.addEventListener('load', function () {
            document.querySelector('button').addEventListener('click', () => {
                console.log('1111')
            })

        })

    </script>
</head>

<body>
    <button>点击</button>
</body>

节点操作

查找结点
查找父节点
console.log(son.parentNode)
查找子节点
console.log(ul.children)
创建节点
document.createElement(‘标签名’)
删除节点
父元素.removeChild(要删除的元素)

<body>
    <div class="father">
        我是父亲


        <div class="son1">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>

    </div>

    <script>
        let father = document.querySelector('.son').parentNode
        console.log(father)

        let son = document.querySelector('.father').children
        console.log(son)

        document.querySelector('.son1').nextElementSibling.style.color = 'pink'
    </script>
</body>

追加节点

删除节点
父元素.removeChild(要删除的元素)

<style>
        li {
            list-style: none;
            width: 500px;
            height: 100px;
            background-color: pink;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <button>
        发布
    </button>
    <ul>
        <li>11111</li>
        <li>2222</li>
        <li class="three">3333</li>
        <li>4444</li>


    </ul>

    <script>
        const btn = document.querySelector('button')
        const ul = document.querySelector('ul')
        btn.addEventListener('click', () => {
            // 1、创建节点          
            let newLi = document.createElement('li')
            
            //2、添加内容
            newLi.innerHTML = `<h1>我是新创建的li</h1>  <button>删除</button>`

            // 3、追加
            let p2 = newLi.querySelector('button')
            console.log(p2)


            p2.addEventListener('click', () => {
                ul.removeChild(newLi)----删除节点
            })
            ul.append(newLi)
        })

    </script>
</body>

滚动事件

<style>
        body {
            height: 4000px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <script>
    </script>
</body>

构造函数

<body>
    <script>
        // let obj = {
        //     uname: 'zs',
        //     age: 13
        // }
        // let obj1 = {
        //     uname: 'wdd',
        //     age: 15
        // }
        // let obj3=new Object()
        function Obj(uname, age, gender) {
            this.uname = uname,
                this.age = age,
                this.gender = gender
        }
        // 原型  将不变的方法，直接定义在prototype上，让所有对象的实例共享
        Obj.prototype.sing = function () {
            console.log('爱编程')
        }
        // 构造函数的原型上存在构造器（constructor属性）指向构造函数，完成双向指定
        console.log(Obj.prototype)

        // let obj1 = new Obj('gouxin', 23, '女')
        // console.log(obj1)
        // let obj2 = new Obj('jiangjia', 33, 'nan')
        // obj2.age = 22
        // console.log(obj2)

        // obj2.sing = function () {
        //     console.log('no')
        // }
        // obj1.sing()
        // obj2.sing()



        // let str1=''
        // let str=new String()

        let obj = new Obj('gouxin', 21, 'nv')
        obj.sing()
        let obj2 = new Obj('jiangjia', 33, 'nan')
        obj2.sing()
    </script>
</body>

构造函数02

<body>
    <script>
        function Obj(uname, age, gender) {
            this.uname = uname,
                this.age = age,
                this.gender = gender
        }
        Obj.prototype = {
            //必须手动指明构造器所指向的构造函数
            constructor: Obj,

            sing: function () {
                console.log('我要唱歌了~')
            },
            dance: function () {
                console.log('我爱跳舞')
            }

        }
        console.log(Obj.prototype)
        let obj1 = new Obj('gouxin', 21, 'nv')

        obj1.sing()
        // __proto__   :对象原型，实例出来的对象中用于指向构造函数Obj的原型对象prototype的
        console.log(obj1.__proto__ === Obj.prototype)

        console.log(obj1.instanceof(Obj))

    </script>
</body>

</html>

this关键字

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>tijiao </button>
    <div></div>
    <script>
        // 默认指向windows  ,函数基本调用时，也只想windows
        console.log(this)


        // 构造函数中this指向实例化的对象
        // function Obj(uname, age, gender) {
        //     this.uname = uname,
        //         this.age = age,
        //         this.gender = gender
        //     console.log(this)
        // }
        // let obj1 = new Obj('gouxin', 21, 'nv')
        // console.log(obj1)

        // 对象方法中，this指向当前对象

        // 箭头函数，没有this的概念，会沿着作用域链查找
        let obj2 = {
            uname: 'gouxin',
            age: 18,
            sing: () => {
                console.log(this)
            }
        }
        obj2.sing()

        // function fn() {
        //     console.log(this)
        // }
        // window.fn()
        // document.querySelector('button').addEventListener('click', fn)
        // document.querySelector('div').addEventListener('click', fn)
        // obj2.sing()
    </script>
</body>

js执行机制

<body>
    <script>
        console.log('11')
        setTimeout('console.log(\'22\')', 0)  
    </script>
</body>

正则表达式

<body>
    <script>
        let regex = /./

        let str = '1222gouxingouxin'
        // console.log(regex.test(str))


        // .字符  除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符
        // console.log(str.match(/./))
        // console.log(regex.exec(str))
        // console.log(str.match(/^.$/))
        // \d    0-9之间的数字   *数量  0-n
        // console.log(str.match(/.*/g))
        // +   1-n个
        // console.log(str.match(/[a-z]+/g))

        // console.log('13193397789jndjncd'.match(/^[0-9]{11}.+$/g))
        //    2119554634@qq.com
        let re = /^[0-9]{8,11}@.+$/
        re.test('23244@qq.com')

        console.log('554363636@qq.com'.match(re))



    </script>
</body>

a.html

<body>
    <button>tijaio</button>
    <ul>

    </ul>
    <script>
        const btn = document.querySelector('button');
        const ul = document.querySelector('ul');
        let li3 = document.querySelector('.three');

        btn.addEventListener('click', () => {
            // 1. 创建一个新的列表项
            let newLi = document.createElement('li');

            // 2. 设置新列表项的内容
            newLi.innerHTML = `<h1>我是新创建的li</h1><button>删除</button>`;

            // 3. 在 li3 之前追加新的列表项
            ul.insertBefore(newLi, li3);

            // 4. 获取新列表项内的删除按钮
            let p2 = newLi.querySelector('button');

            p2.addEventListener('click', () => {
                // 5. 当点击删除按钮时移除列表项
                ul.removeChild(newLi);
            });
        });

    </script>
</body>
Orangeio
关注
事件委托
01-08
事件委托是一种在JavaScript中处理DOM事件的高效策略，它基于事件冒泡的原理，将事件处理器绑定到父级元素而不是每个子元素上。这样可以显著提高性能，减少内存占用，并且能够处理动态添加的子元素的事件。 首先，...
querySelector无法绑定onclick
qq503203931的博客
05-13 3115
querySelector无法绑定onclick问题描述接下来我做了一些测试结论 问题描述 用querySelector()选择器获取一个Button并且为Button绑一个onclick事件，结果点击发现没有反应。 var btn = document.querySelector("#btn"); btn.onclick=function(){ console.log('btn.onclick'); } 接下来我做了一些测试 先是用getElementById()试一下 var btn = docu
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
介绍函数用法：document.querySelector
m0_57236802的博客
04-21 1万+
是一个 JavaScript 函数，它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回。是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素，可以使用。这个函数返回一个包含所有匹配元素的 NodeList。是一个包含 CSS 选择器的字符串，用于查找和选择元素。这将选择文档中第一个类型为。这将选择文档中的第一个。
JavaScript day12学习笔记
qq_44194406的博客
06-11 256
事件冒泡:从里到外冒泡,子元素有一个按钮添加了点击事件,父元素也添加了点击事件 在你触发对应的按钮的点击事件后,同时他会自动调用对应父元素的点击事件,此机制就叫做事件冒泡
JavaScript处理点击事件
最新发布
分享学习网络的点点滴滴
10-03 545
在介绍点击事件之前，先给它们讲一些概念。
2020科大讯飞事件抽取代码
02-08
本代码为2020科大讯飞事件抽取挑战赛第一名的源代码下载该代码还可同时获取该代码的docker镜像，可以直接运行，不需要修改bug！
C#事件实例详解
01-20
C#事件是面向对象编程中的一种机制，用于在对象状态改变时通知其他对象。它结合了代理（Delegate）的概念，提供了安全和灵活的方式来处理事件。下面是对C#事件的详细解释： 1. **代理（Delegate）**: 在C#中，代理...
matlab-simulink-事件触发控制仿真
04-17
在MATLAB Simulink环境中，事件触发控制是一种高级的控制策略，它允许系统仅在特定事件发生时执行控制算法，而不是按照固定的时间步长。这种控制方式可以显著提高效率，减少计算负担，同时还能实现精确的控制效果。...
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
JavaScript DOM及其操作（事件）
modao的博客
06-13 1838
本文主要介绍JavaScript中 DOM这里事件的相关内容，包括操作事件的方法，常见事件类型、事件对象属性和方法等。
4、DoM事件流 事件委托、绑定事件
hzg_hou的博客
05-12 946
DOMLO绑定事件高低版本浏览器之间不存在任何的差异事件冒泡事件捕获处理程序(事件执行的代码)dom0事件及低级浏览器的dom2事件（没有第三个参数）都是只有冒泡，以后我们用的最多的也是冒泡，捕获几乎不用，高级浏览器的dom2事件可以根据第三个参数选择是捕获还是冒泡，一般我们都不写，默认是冒泡低版本浏览器DOML0事件写法中,阻止a标签默认行为通过 return false实现, 不支持preventDefault()
事件处理详解
weixin_33805743的博客
10-20 102
前言 　　本文大概整理下绑定事件的几种方式，兼容IE8- 的方式（如果需要的话），事件委托，阻止传播，取消默认行为，event对象等。 　　之前做的多是手机端页面，监听事件也一直是addEventListener ，现代浏览器基本都支持addEventListener，除了万恶的IE8及更低版本IE。虽说不用太管IE8了（个人愚见），但是还是有必要整理下之前兼容性的处理方式 HTML事件...
DOM基础
content899的博客
09-19 874
DOM基础
jq-效果
m0_66711291的博客
02-15 379
1.渐变方法 1.显示和隐藏 //显示和隐藏 var btns = document.querySelectorAll('button'); //隐藏方法 btns[0].onclick = () => { jQuery('div').hide(); } //显示方法 btns[1].onclick = () => { jQuery('div').
HTML DOM querySelector() 方法的使用与示例
debugtoday的博客
03-03 2378
HTML DOM querySelector() 方法的使用与示例
10-DOM
qq_41222991的博客
08-26 177
10
html5
u010467276的博客
03-04 184
html5新特性 新的选择器 querySelector 选择一个（如果多个匹配返回第一个） document.querySelector('#div'); document.querySelector('.div'); document.querySelector('div'); querySelectorAll 选择多个 getElementsByC...
JavaScript事件与事件处理详解
"本章详细介绍了JavaScript中的事件与事件处理，包括事件的重要性和理解它们对JavaScript编程的关键性，以及如何指定事件处理程序的三种方法。此外，还列举了一些JavaScript常用的事件类型，包括用户操作和浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值