js_操作dom(委托和冒泡事件)

简介: js_操作dom(委托和冒泡事件)

js操作html

js操作dom

js创建div样式,添加节点删除节点等等

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');
el1.appendChild(el2)
el1.removeChild(el2)

div绑定js函数

onclick绑定事件

<div id='childID' onclick="childfunc()">子组件</div>

js的委托事件

将事件统一绑定给元素共同的祖先元素(后代元素事件触发时,通过冒泡,通过祖先元素的响应函数来处理事件)

这样可以只绑定一次,即可应用到多个元素上

事件的委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

event中的target表示的触发事件的对象

使用它对触发事件的元素进行判断

js

function onloadEvent() {
      document.getElementById("eventTrust").addEventListener('click', function(e) {
          alert("点击的内容是:" + e.target.innerHTML);
        })
      }
    window.onload=onloadEvent()

div

function onloadEvent() {
      document.getElementById("eventTrust").addEventListener('click', function(e) {
          alert("点击的内容是:" + e.target.innerHTML);
        })
      }
    window.οnlοad=onloadEvent()

js的冒泡事件

指的是事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同时间也会被触发

div

<div class="right">
        <p>js的冒泡事件</p>
        <div id='parentID' onclick="parentfunc()">
          <div id='childID' onclick="childfunc()">子组件</div>
        </div>
      </div>

事件绑定

<script>
          function parentfunc() {
              console.log('父级事件触发了!')
          }
          function childfunc(){
              console.log('子级事件触发了!')
          }
      </script>

子组件的点击不仅会触发自身绑定的事件也会触发父级事件的点击事件

阻止冒泡

方法一

event.stopPropagation()

注意:但不会阻击dom的默认行为(若添加跳转链接则会触发当前dom跳转)

function childfunc() {
      console.log('子级事件触发了!')
      event.stopPropagation()
    }

方法二

return false;

注意:事件处理过程中,阻止了事件冒泡,也阻止了默认行为(若添加跳转链接也不会触发当前dom跳转)

function childfunc() {
      console.log('子级事件触发了!')
      return false
    }

方法三

event.preventDefault();

注意:事件处理过程中,不会阻止事件冒泡,会阻止了默认行为(若添加跳转链接也不会触发当前dom跳转)

function childfunc() {
      console.log('子级事件触发了!')
      event.preventDefault()
    }


目录
相关文章
|
7天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
5天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
3天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
1天前
|
JavaScript 前端开发
第八篇-Javascript 事件
第八篇-Javascript 事件
9 1
|
1天前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
8 1
|
7天前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
3天前
|
JavaScript 前端开发
JavaScript弹窗事件
JavaScript弹窗事件
|
3天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
10 0
|
3天前
|
JavaScript 前端开发
JS实现移动端的轮播图滑动事件
JS实现移动端的轮播图滑动事件
14 0
|
5天前
|
Web App开发 JavaScript 前端开发
JS 哪些操作会造成内存泄露
JS 哪些操作会造成内存泄露