首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS的事件冒泡和捕获

    事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播,遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例:如果给body中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...此时进入冒泡阶段,inner上的时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。...我们把时间注册在冒泡阶段(addEventListener的useCapture选项为false) var selector = document.querySelector.bind(document

    2.6K20

    JS事件,你真的懂吗(捕获,冒泡)?

    说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,那么冒泡阶段反之,会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。...e.stopPropagation(); 当我们吧这个方法放到inner冒泡阶段的下面的时候,神奇的事情发生了,当代码执行到这里,默认直接把冒泡的事件给阻止了,这时候会呈现出这个样子。...这样就成功的阻止了事件的冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定的,这时候就得了解一下我们的event对象了,我们打印一下event对象,如下: 打印发现当我们触发事件时,

    2.5K20

    控制台禁用js_禁止直接访问js

    //或执行一段死循环 window.open("about:blank", "_self"); } console.log('', devtools); 激活成功教程:可通过标签注入js...除了使用console.log,我们还可以使用console.info,console.dir和console.error等等,需要注意的是ie不支持console.table 激活成功教程:通过标签注入js...this.observerF() : this.observer(); } } ConsoleManager.init() 激活成功教程:通过标签注入js代码清空控制台、取消console.log...缺点:会影像浏览器性能,造成页面卡顿 激活成功教程:想办法重置check函数 6、练手网站推荐 下面推荐几个网站,他们都用了上面讲的某种方法来禁止打开控制台,感兴趣的话可以研究下他们是怎么做到的,该如何激活成功教程

    9.8K20
    领券