JS事件（学习笔记）

最新推荐文章于 2024-05-24 13:39:19 发布

luoyooi

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量220

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/luoyooi/article/details/108087956

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS事件

事件对象

当事件的响应函数被触发的时候，浏览器每次都会将一个事件对象作为实参传递进响应函数，该对象包含了触发该事件的对象（如鼠标、键盘）该拥有的一切信息。可以从arguments中看到确实有传递该对象。
在这里插入图片描述

事件传播

当触发某个元素的某个事件时，事件会从外到里被依次捕获，直到到达触发事件的元素为止，之后从触发事件的目标元素开始，从里到外依次执行捕获到的事件。
在这里插入图片描述

事件冒泡

当子元素的某个事件被触发的时候，其父元素的同类事件也会被触发，从里到外，逐级冒泡。

事件委派

给一个父元素绑定某个事件，当点击其子元素的时候，由于冒泡机制的作用，会将事件冒泡到父元素，并执行父元素的事件函数。类似于通过同一个父元素，把同一类事件绑定到了每个子元素上。在事件对象中，有一个target属性，该属性保存了真实触发事件的那个元素。

<body>
    <input type="button" value="添加新元素">
    <ul class="ul">
        <li><a href="javascript:;" class="link a">链接1</a></li>
        <li><a href="javascript:;" class="link">链接2</a></li>
        <li><a href="javascript:;" class="link">链接3</a></li>
        <li><a href="javascript:;" class="link">链接4</a></li>
    </ul>
</body>
<script>
    var btn = document.querySelector('input')
    var ul = document.querySelector('.ul')
    btn.onclick = function(){
        // 点击按钮给ul添加新元素
        var li = document.createElement('li')
        li.innerHTML = '<a href="javascript:;" class="link">新链接</a>'
        ul.appendChild(li)
    }
    // 给ul绑定单级响应函数
    ul.onclick = function(event){
        event = event || window.event
        // 真正执行点击的对象
        if(event.target.className.match('link'))
        {
            alert('这是超链接')
        }
    }
</script>

luoyooi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS事件（学习笔记）

JS事件事件对象当事件的响应函数被触发的时候，浏览器每次都会将一个事件对象作为实参传递进响应函数，该对象包含了触发该事件的对象（如鼠标、键盘）该拥有的一切信息。可以从arguments中看到确实有传递该对象。事件传播当触发某个元素的某个事件时，事件会从外到里被依次捕获，直到到达触发事件的元素为止，之后从触发事件的目标元素开始，从里到外依次执行捕获到的事件。事件冒泡当子元素的某个事件被触发的时候，其父元素的同类事件也会被触发，从里到外，逐级冒泡。事件委派给一个父元素绑定某个事件，当点击其
复制链接

扫一扫