js/jq——事件触发方式事件冒泡捕获阻止冒泡和默认事件

1、标签（不推荐，要将script放在页面最后且不能onload）

<body>
<button onclick="clickEvent()">click</button>
</body>


<script>
    function clickEvent() {
        alert('hello world!');
    }
</script>

2、函数赋值

<body>
<button id="btn">click</button>
</body>

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');

        // btn.onclick = function(){
        //     clickEvent()
        // };
        // function clickEvent() {
        //     alert('hello world');
        // }

        btn.onclick=function(){
            alert('hello world');
        };
    }
</script>

3、事件监听（传入的是函数不是函数值）

<body>
<button id="btn">click</button>
</body>

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');

       btn.addEventListener('click',function(){
            alert('hello world!');
        })
    }
</script>

移除addEventListener添加的事件：

ele.removeEventListener('click',myFunction);

addEventListener方法特点：

1、同一事件多个句柄（不会覆盖已存在事件）

ele.addEventListener("click", myFunction);
ele.addEventListener("click", mySecondFunction);

2、不同事件句柄（给同一元素添加不同事件和函数）

ele.addEventListener("click", myFunction);
ele.addEventListener("mouseout", mySecondFunction);

$(function () {
            var btn=$('button');
            //1.eventName(fn)
             btn.eq(0).click(function () {
                 alert('1');
             });
            //2.on('eventName',fn)
            btn.eq(1).on('click',function () {
                alert('2')
            },true)//true：代表捕获（由外向里） ；false（默认值）：代表冒泡（由里向外）；
         });

事件冒泡捕获

冒泡：事件由里向外扩散传递

<body>
<script>
    window.onload = function () {
        document.getElementById("father").addEventListener("click",function(){
            alert('1');
        });
        document.getElementById("son").addEventListener("click",function(){
            alert('2');
        })
    }
</script>
<div id="father">
    　　<button id="son">click</button>//先2后1
</div>
</body>

捕获：事件由外向里扩散传递

<body>
<script>
    window.onload = function () {
        document.getElementById("father").addEventListener("click",function(){
            alert('1');
        },true);
        document.getElementById("son").addEventListener("click",function(){
            alert('2');
        },true);
    }
</script>
<div id="father">
    　　<button id="son">click</button>//先1后2
</div>
</body>

阻止事件冒泡

document.getElementById("father").addEventListener("click",function(){
            alert('1');
        });
        document.getElementById("son").addEventListener("click",function(e){
            //return false;//法一（需放前面，不推荐）
            e.stopPropagation();//法二（推荐）
            alert('2');
        });
    }

<div id="father">
    　　<button id="son">click</button>//仅2
</div>

阻止默认事件

document.getElementById("tag").addEventListener("click",function(e){
            e.preventDefault();
            alert('3');
        });

<a href="https://www.baidu.com" id="tag">baidu</a>//点击会弹窗显示3，但不会跳转到百度链接

js/jq——事件触发方式 事件冒泡捕获 阻止冒泡和默认事件

猜你喜欢

js/jq——事件触发方式事件冒泡捕获阻止冒泡和默认事件