jQuery 事件总结_jqery 0级事件和2级事件-优快云博客

本文链接：https://blog.youkuaiyun.com/SOALIN228/article/details/84454940

本文深入解析了DOM0级和DOM2级事件的区别，包括事件冒泡和事件捕获的概念，以及如何使用JavaScript阻止事件冒泡。同时，介绍了jQuery事件处理机制，如事件委托、阻止冒泡、事件触发和事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM0级事件和2级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p id="example" onclick="console.log('Click');">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur.
    </p>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
 <script>
    document.getElementById('p1').onclick = function() {
        console.log('p1'); 
    };
    document.getElementById('p1-1').onclick = function() {
        console.log('p1-1');
    };
    document.getElementById('p1-1-1').onclick = function() {
        console.log('p1-1-1');
    };
    document.getElementById('p1-1-1-1').onclick = function(e) {
        e.cancelBubble = true; //阻止冒泡
        console.log('p1-1-1-1'); // dom0级后面的会覆盖前面的
    };
    
	document.getElementById('p1').addEventListener('click', function() { 
        console.log('p1');	//dom2级后面不会覆盖前面的时间
    }, false); //冒泡不捕获(反之捕获)
</script>
</body>
</html>

jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <h2>title</h2>
    <div class="item">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <button id="all">全部标记为已读</button>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function() {
       $('ul').on('click', function (event) { //添加事件
           console.log('%o clicked', $(event.target)); //运用冒泡实现对子元素的监听(事件委托)
       })
       $('p').on('click', function (e) {
           e.stopPropagation() //阻止冒泡
           console.log('clicked p');
       })
       $('p').one('click', function(e) { //只执行一次的事件
            console.log('clicked p');
        });
        $('p').off('click') //移除click事件
        
        $('li').on('click', function(e, arg1, arg2) {
            console.log('%o 已读', $(this));
            console.log(arg1);
            console.log(arg2);
            return $(this);
        });

        $('#all').on('click', function() {
            console.log($('li').trigger('click', [1, 2])); //所有匹配元素的事件
        });
    });
</script>
</body>
</html>