首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AngularDart4.0 高级-属性(Attribute)指令 顶

    属性指令改变DOM元素的外观或行为。 尝试一下实例(查看源代码)。 指令概述 Angular有三种指令: 组件 - 指令与模板。 结构指令 - 通过添加和删除DOM元素来更改DOM布局。...Angular为每个匹配元素创建一个指令控制器类的新实例,将HTML元素注入到构造函数中。...添加两个事件处理程序,当鼠标进入或离开时进行响应,每个都由HostListener注解装饰。...让模板开发人员设置默认颜色。...概要 该页面介绍了如何: 创建一个修改元素行为的基于类的属性指令。 将属性指令应用于模板中的元素。 响应改变基于类的指令行为的事件。 将值绑定到基于类的指令。 编写一个函数化的属性指令。

    3.6K10

    Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

    将每个特性写成单元测试,然后写代码,将这个单元的代码测试通过后,再进行下一个特性代码的单元测试。... 属性型指令用于改变一个 DOM 元素的外观或行为。...这样代码可以访问 DOM 元素。 Input将数据从绑定表达式传达到指令中。 Renderer让代码可以改变 DOM 元素的样式。...响应用户引发的事件 -- 高级应用 需求 鼠标悬浮一个元素时,显示字的背景颜色。 检测用户的鼠标何时进入和离开这个元素。 通过设置和清除高亮色来响应这些操作。...) {} @HostListener('mouseenter') onMouseEnter() { /* . . . */ } @HostListener('mouseleave') onMouseLeave

    1.6K30

    JavaScript 教程「10」:DOM 事件

    事件 什么是事件 在之前 DOM 的学习中,我们主要学习了如何获取 DOM 元素,并且学会了如何给获取的元素进行属性修改等操作。但这些基本都是静态的修改,并没有接触到一些动作。...事件监听 事件监听,就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,这个过程就叫做注册事件。...事件类型 学习了事件的定义以及如何实现一个最简单的事件监听,接下来就来看看,Web API 中为 DOM 提供的常用事件类型有哪些。...主要有 4 种类型的事件,分为: 鼠标事件 焦点事件 键盘事件 文本事件 以下就分别来看看这些类型的事件又可以细分为哪些小类。...鼠标事件 事件 说明 click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开 焦点事件 事件 说明 focus 获得焦点 blur 失去焦点 键盘触发 事件 说明 keydown

    43621

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    鼠标事件:在DOM2.0中,W3C对鼠标事件作了现范,鼠标事件被解析为MouseEvent(我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件。...focus跟blur的 e.constructor 为FocusEventMouse事件Mouse事件有7种,分别是:mouseup:鼠标在元素上松开时触发 mouseup 事件。...mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。mousemove:鼠标在元素上移动时触发 moudemove 事件。...结合其对称事件, mouseleave, mouseenter DOM事件的行为方式与CSS  :hover 伪类非常相似。还有就是:mouseover先触发,mouseenter 后触发。...touchmove'))    test.addEventListener('touchend',()=>console.log('touchend'))    看看结果如何

    4.2K21

    关于事件的前端面试题总结

    本文首发于前端面试总结@知乎专栏,各位可以通过点击文章下方的阅读原来来访问原文地址 问题一览 mouseover和mouseenter两个事件有什么区别?...如何屏蔽掉这个不同? Event对象中,target和currentTarget的区别? 说一说什么是事件冒泡,如何阻止事件冒泡?如何阻止默认事件? 是否了解移动端的点击穿透,原理及解决方法?...这道题通常情况下会有好几种引出方式,看面试官如何带节奏了~ 比如,会问你如何给一个超长的商品列表中的每个商品绑定一个点击事件啊?如何解决大量事件绑定造成的内存开销问题啊?...当然如果面试官问到了,他的初衷也绝对不是想让你透彻的讲解一遍,只是想确认面试者对于JS运行机制的了解程度。 好,我试着笼统地概括一下。...touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。

    1.7K50

    面试官:哪些浏览器事件不会冒泡?

    回答这个问题之前,我们首先要具备DOM事件流捕获与冒泡的知识,这里只讲JS中如何设置这两种事件监听,例如对body注册点击事件:document.body.addEventListener('click... 我们只需设置overflow: scroll;,当内层长度超出外层时元素就会出现滚动条,此时应有两个滚动事件,我们分别为...scroll 还是可以不通过滚轮来控制滚动的,所以还记得前面我们怎么让元素滚动起来的吗?...mouseenter、mouseleavemouseover & mouseenter 均为鼠标移动到元素上的事件,两者区别在于后者不会冒泡。...相比之下直接使用 mouseenter 就不会出现以上这些问题了。图片同样的,mouseout会冒泡,而mouseleave则不会冒泡。

    1.9K20

    webAPIs02-事件

    事件监听 ​ 就是让程序监测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件 或者 注册事件。 ​...即,监听用户的行为,做出反馈,比如:鼠标经过显示下拉菜单、点击按钮可以播放轮播图等等结合 DOM 使用事件时,需要为 DOM 对象添加事件监听,等待事件发生(触发)时,便立即调用一个函数。...addEventListener 是 DOM 对象专门用来添加事件监听的方法,它的两个参数分别为【事件类型】和【事件回调】。 mouseenter 监听鼠标是否移入 DOM 元素 鼠标事件 监听与鼠标相关的操作 DOM 元素 box.addEventListener('mouseenter', function () { // 修改文本内容 this.innerText = '鼠标移入了

    84610

    QQ空间缓存图片_QQ空间原图

    直到用户点击图片跳转到详情展示: ---- 分析 这种方式着实让我“眼前一亮”,一定程度上带给了用户新奇的体验感。...这是用来获取图片原始高度的(同系的还有 image.naturalWidth ,你可以用它来确定包裹元素的最大/最小宽度); dom.offsetTop :offset系的API,用来获取dom元素和离它最近的父元素顶部的距离...() :它有四个常用值:left、top、right、bottom,分别是相对于当前视口(即此tab网页窗口左侧、顶部、右侧、底部)的位置; dom.scrollHeight :scroll系的API,...那还如何能够获取到?...当然,我们可以改变策略,让图片的 margin-top 不断--或++ 直到临界值,但这样势必会带来巨大的性能开销。

    6.9K20

    前端入门6-JavaScript客户端api&jQuery

    以上基本的语法了解后,至少就知道如何声明变量、函数、对象,如何使用了,这就足够了,那么接下去就是熟悉下客户端 API,也可以说是浏览器按照标准提供的各 API 的使用。...概念 那么,什么是 DOM 呢,其实就是浏览器根据 HTML 文档构建出的一颗 DOM 树,树中每个节点对应着 HTML 文档中的每个元素标签,因此树的结构可以很好的表现出各个元素之间的层级关系。...所以,下面会分别介绍 W3C 规范的标准 API 和 jQuery 的使用: DOM API document document 是内置的全局变量,在 JavaScript 可以直接通过该关键字使用,使用时会获取到当前...close() 关闭窗口(不是所有浏览器都允许js关闭窗口) focus() 让窗口获得键盘焦点 scrollBy(x, y) 让文档相对于当前位置进行滚动 scrollTo(x, y) 滚动到指定位置...addEventListener:" + this); }); } 调用 HTMLElement 对象的 addEventListener() 方法,第一个参数传入需要监听的事件名称,第二个参数为事件触发时的响应方法

    6.3K40
    领券