首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【如果你要学JS 】——事件绑定及解除DOM事件

前情提要文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐处理可扩展标记语言 ( HTML或者XML )标准编程接口。...W3C已经定义了一系列DOM接口,通过这些DOM接口可以改变网页内容、结构和样式。关于dom操作,我们主要针对于元素操作。主要有创建、增、删、改、查、属性操作、事件操作。...:父(parentNode),子(children),兄(previousElementSibling、 nextElementSibling)提倡1.注册事件绑定事件)注册事件有两种方式:传统方式和方法监听注册方式...2'); div[1].removeEventListener('click', fn); } 3.DOM事件事件流描述是从页面中接收事件顺序...,事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。

19310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js绑定事件代理

    js通过事件代理方式绑定跳转事件,我这里逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好class,则执行跳转逻辑。...但是这种方式好像只能是在点击元素上面,也就是最内层元素上面有相应class才能跳转,在外层加同样class不生效,说明是我对于事件代理理解不够深刻,其实事件代理作用就是为了把目标元素事件绑定在外层做代理...class时执行点击事件,又想要外层元素含有class时执行点击事件,修改优化如下: document.querySelector('#container').addEventListener('click...', function (e) { console.log(e.currentTarget) //获得当前绑定监听事件元素, container console.log...注意:内层元素,即点击目标元素必须是点击时真正目标元素,而不是外面一层; currentTarget绑定相应想要点击class时候必须是做代理即做事件监听元素。

    4.9K20

    JSDOM事件流总结

    一、事件捕获 1.概念 事件捕获:从document到触发事件那个节点,自上而下去触发事件。...2.图解 事件捕获 二、事件冒泡 1.概念 事件冒泡:从触发事件那个节点一直到document,是自下而上去触发事件。...2.图解 事件冒泡 三、DOM事件流 1.概念 DOM事件流相当于将事件捕获与事件冒泡两者结合起来,事件触发顺序是先进行事件捕获阶段 => 目标元素阶段 => 事件冒泡阶段。...2.图解 DOM事件流 3.示例 绑定事件方法(addEventListener)第三个参数是控制事件触发顺序,默认为false,即事件冒泡;若为true,即事件捕获。 <!...目标阶段处理函数,先注册先执行,后注册后执行。 事件阻止只能阻止后续阶段事件并且未作用于同一元素上事件函数。

    3.9K30

    jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定 源码地址:...注意: 若在替换之前, 已经在元素上绑定事件, 替换后原先绑定事件会与原先元素一起消失 //段落 //方式一...DOM 元素添加事件....它需要等待页面上面所有元素都加载完毕,包括图片,src=“” $(function(){})只需要页面上面的dom元素绘制完毕之后就执行,不含图片或者第三方连接地址… 事件绑定 我们除了可以直接为页面的元素增加事件...,也可以利用bind()方法为页面元素来绑定事件

    1.5K10

    【Node.JS事件绑定与触发

    往期文章 【Node.JS】写入文件内容 【Node.JS】读取文件内容 目录 简介 绑定事件 on() addListener()  once() 监听事件emit()  传参  删除事件 removeListener...()  removeAllListeners() ---- 简介 node.js事件是使用events模块,通过实例化它里面的EventEmitter类,来绑定和监听事件。...('namea', function () { console.log("坚毅小解同志"); }) 查看绑定事件 const eve = require("events"); //导入模块..."); }) //查看对象属性 里面有绑定事件 console.log(event);  里面有事件具体属性,和事件数量。...{a}同志`); }) //触发事件冰川入参数 event.emit('namea', '小解');  once() once 只会绑定一次性触发事件,触发一次后就会解除绑定

    11.1K40

    【Vue原理】Event - 源码版 之 绑定组件DOM事件

    DOM事件 上一篇已经说了绑定正常标签原生事件,今天是组件原生事件,两者最终作用是一样,但是过程有少少不同 最近更新快是因为文章早就写完了,只是定时发而已哈哈 官网已经说明,要是想在组件上绑定原生事件...[公众号] 这个VNode 是 外壳vnode,我们已经知道外壳 vnode 是保存 父子组件关联数据 比如 props,事件之类 所以你在组件上绑定原生事件,自然而然就是保存在 外壳vnode...Vnode 相关又可以看这篇哦 【Vue原理】VNode - 源码版 --- 怎么绑定 绑定流程千篇一律,但是有少少出入 可以参考我这篇,绑定原生事件文章 【Vue原理】Event -...源码版 之 绑定标签DOM事件 相同地方简单提一下,不同地方再仔细说 1、绑定事件发生在 挂载DOM阶段,从 Vue.prototype....updateDOMListeners updateDOMListeners 这个函数在上一篇文章中已经说过啦,大家可以看一下 Event - 源码版 之 绑定标签DOM事件 但是我依然给复制源码到这里

    85230

    使用jQuery.data()查看元素上绑定事件

    最近遇到一个诡异问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续流程中,无故丢失了。但是,我不知道它是什么时候丢失。 所以我需要要一步步逼近定位到问题。...最先想到是浏览器面板上面的,可以选中元素,看元素上面的事件绑定。 但浏览器上面看到是结果量,也就是看到是已经丢失了事件元素,但我还是不知道什么时候丢失。...我可以断点取到每个阶段HTMLElement元素状态,但是,这个时候,我却找不到观察其事件绑定情况方法。 谷歌好久,发现JS原生是没法查看事件绑定情况。...还好,我们都是用jQuery,用$.on()。 而jQuery自身事件绑定,额外添加了一层事件数组。...,就会返回这个元素上面绑定所有事件

    1.9K00

    【JavaScript】DOM对象&JS事件总结&全局函数

    本期介绍 本期主要介绍DOM对象&JS事件总结&全局函数 文章目录 1. DOM 对象 1.1 DOM 对象是什么?有什么作用? 1.2 DOM 树介绍 1.3 DOM 和 BOM 关系 2. ...JS 事件总结 3. 全局函数(global) 3.1 执行 3.2 编码和解码 3.3 字符串转数字 1. DOM 对象 1.1 DOM 对象是什么?有什么作用?...加载到浏览器内存 加载并解析到内存中,会生成一张 DOM 树 其中: 在 DOM 树中所有的成员都可以成为节点 (Node) 整个 DOM 树,是一个文档节点对象,即...JS 事件总结 常见事件 示例代码: 鼠标键盘事件 示例代码: 3. 全局函数(global) 3.1 执行 作用:用于增强程序扩展性。...(Not A Number,一个数字类型标识,表示不是一个正确数字)

    2.9K50

    js 动态生成 input 绑定事件 blur 无效

    ,而针对于其中input标签,要求设置失去焦点blur事件 需要实现界面截图如下: ?...最开始编写 js 代码如下: /** * 当sku库存量变化时,对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...,而动态新生成却无法触发blur事件 因为测试失败后,转而考虑新写法,且可以正常实现 ?...ி 附录 1.针对我问题,求助度娘,发现了下面的一个帖子,可作参考 动态添加blur事件失效 [问题点数:60分,结帖人lawrendc] 时间相当久远... 2.最接近解决需求文章如下...,建议可自行测试 动态生成input绑定事件无效如:blur 意见:异步导致绑定事件失败,需使用全局绑定事件 3.w3school 文档 - onblur 事件 这就是官方文档

    8.9K00

    【Vue原理】Event - 源码版 之 绑定标签DOM事件

    欢迎来到 component 内心世界 建议可以先看看白话版 Component - 白话版 Component 创建,我主要分了两个流程 1、创建 组件 VNode 2、挂载 组件 DOM...没错了,今天讲就是 创建组件 VNode --- 场景设置 首先,我们假定现在有这么一个模板,使用了 test 组件 [公众号] [公众号] 然后页面噼里啪啦执行到了 准备挂载DOM 步骤(之前部分跟本主题无关...,跳过) 然后页面准备执行渲染函数 render,嗯,就是执行上面模板生成渲染函数,如下 [公众号] 没有错,我们 Vue 已经走到了这一步,那么我们突破口是什么?...$options // 从父组件选项上拿到 对应组件选项 var Ctor = options.components[tag] if (正常HTML标签..._base = Vue; Vue 在引入时候,就完成了很多初始化内容,这里就是其中给 Vue 增加options 部分 你看到 component 啊,filter 什么啊,没错,保存就是你全局注册

    53940
    领券