事件冒泡与捕获阻止事件冒泡的传播事件委托如何阻止默认行为（右键单击）

最新推荐文章于 2023-08-17 18:07:48 发布

原创最新推荐文章于 2023-08-17 18:07:48 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了JavaScript中的事件冒泡和捕获机制，展示了如何阻止事件从子元素向父元素传播，以及利用事件委托提高代码效率。同时，解释了如何阻止特定事件的默认行为，如右键单击和表单提交。

事件冒泡与捕获

阻止事件冒泡的传播

事件委托

   var oUl = document.querySelector('ul')
        oUl.onclick = function (e) {
            if (e.target.nodeName === 'LI') {
                console.log('我是 li 标签, 我被点击了~~~')
            }
        }

如何阻止默认行为（右键单击）

 
 <form>
        <input type="text">
        <input type="submit">
    </form>
 </body>

       var form = document.querySelector('form')
        form.addEventListener('submit',function (e) {
            e = e || window.event
            // 阻止默认行为
            try{
                e.preventDefault()
            } catch(err) {
                e.returnValue = false
            }

            //  e.preventDefault()
            console.log('该函数执行, 拦截掉了 submit的提交行为');
        })