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

Angularjs基础(十)

ng-blur  描述:规定blur 事件的行为       实例:输入框失去焦点的(onblur)执行表达式:         <input ng-blur="count = count...ng-change 描述:规定在内容改变<em>时</em>执行的表达式。       实例:<em>当</em><em>输入</em>框 的值改变<em>时</em>执行函数。         ...ng-change <em>事件</em><em>在</em>值的每次改变<em>时</em><em>触发</em>,它不需要等等一个完成的修改过程<em>或</em>等待失去<em>焦点</em>的动作         ng-change <em>事件</em>只针对<em>输入</em>框值的真实修改,而不是通过JavaScript 来修改...ng-class-even 指令建议使用 <em>在</em>表格的样式渲染<em>中</em>,但是所有HTML <em>元素</em>都是支持的。           ...ng-class-odd 指令建议使用 <em>在</em>表格的样式渲染<em>中</em>,但是所有HTML <em>元素</em>都是支持的。

3.3K50

Angularjs基础(十一)

ng-cut指令指令不会覆盖元素的原始oncut事件事件触发,ng-cut表达式与原始的oncut 事件都会执行。         ...ng-dblclick 指令指令不会覆盖元素的原始 ondblclick 事件, 事件触发,ng-dblclick 表达式与原始的 ondblclick 事件将都会执行。         ...ng-focus         规定焦点事件的行为           实例:输入框获取焦点执行表达式:             <input ng-focus="count = count...<em>元素</em><em>或</em>获取<em>焦点</em><em>时</em>执行的操作。         ...ng-form         指定HTML表单继承控制器表单 ng-hide           隐藏<em>或</em>显示HTML         实例:<em>在</em>复选框<em>选中</em><em>时</em>应从一部分;         隐藏

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

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

浏览器接收到可以 angular context 处理的事件,$digest 循环就会触发,遍历所有的 $watch,最后更新 dom。... $digest 循环结束,DOM 相应地变化。 脏检查如何触发angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。...所以说不要怀疑用户输入表单 angular 会不会监听页面左边导航栏的变化。 如何优化脏检查与运行效率 脏检查慢吗? 说实话脏检查效率是不高,但是也谈不上有多慢。简单的数字字符串比较能有多慢呢?...(例如每个 tab 都被封装为一个组件),那么仅这个 tab 被选中该 controller 才会执行,可以减少各页面的互相干扰 如果 controller 调用接口获取数据,那么仅对应 tab...被选中才会加载,避免网络拥挤 当然也有缺点: DOM 重建本身费时间 如果 tab 下有 controller,那么每次该 tab 被选中 controller 都会被执行 如果在 controller

7.7K40

js 事件笔记

一、事件简述 1、事件概念 Web, 事件浏览器窗口中被触发,执行事先绑定的事件处理器(也就是事件触发时会运行的代码块),对事件做出响应。...用户浏览器的任何一个操作都会去触发一个事件,JavaScript采用异步事件驱动编程模型,文档、浏览器、元素或与之相关对象发生特定事情,浏览器会产生事件。...2、常见的事件 事件是某个行为或者触发,比如点击、鼠标移动、提交表单,滚动菜单等等 二、事件流 1、事件流的作用 事件流描述的是从页面接收事件的顺序,比如有两个嵌套div,点击了内层的div,这时候是内层的...2、举个栗子 需求:给container里面所有box都绑定点击事件,点击输出box的值 2.1方式一:foreach 原理:选中.box所有元素,得到一个类数组对象,遍历这个类数组对象,给.box元素一一绑...六、常见的事件类型 常见事件类型 解析 click 单击 dblclick 双击 focus 焦点,比如表单input把光标放上去开始输入的时刻 blur 失去焦点,比如输入完成切换到下一个输入,就失去了焦点

11K21

HTML事件属性--DOM

input失去焦点的时候产生什么样的效果 demo查看 2.onfocus 元素获得焦点触发事件,和onblur相反 demo查看 3.onchange 元素改变的时候触发事件 <input...表单获得输入时可以触发事件 触发发不了脚本 6.onforminput 表单获得用户输入触发事件,无法触发 浏览器不支持 6.oninput 元素获得用户输入触发事件 输入输入或者删除都会触发...7.oninvalid oninvalid事件要搭配required属性来使用 required如果使用该属性,代表必填字段,oninvalid是元素无效触发事件 <input...} demo查看 3.拖动事件 ondrag/ 元素拖动触发事件 ondragstart/拖动操作开端运行的脚本 ondrop/ 元素正在被拖动触发事件 ondragend...} 每次滚动都可以触发,可以绑定到body上 demo查看 9.onscroll 元素滚动条滚动触发事件 <div onscroll="myfun(

3.7K20

AngularDart4.0 指南- 模板语法二 顶

模板表达式计算结果为trueAngular会添加类。 表达式为false,它将删除类。 <!...如果名称未能匹配已知指令的元素事件输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定Angular为目标事件设置了一个事件处理程序。...指令没有合适的宿主元素如何对元素进行分组。 如何编写自己的结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM添加删除元素。...如果嵌套表达式试图访问null属性,Angular会抛出一个错误。 这里我们看到NgIf守护两个。 currentHero名称仅在有currentHero出现。...它可以根据切换条件从几个可能的元素显示一个元素Angular只把选中元素放入DOM

29.9K20

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 失去焦点绑定输入框的值scope 变量。                 ...实例:鼠标执行穿过元素执行表达式              鼠标闯过我</...ng-mousemove           描述:规定鼠标指针指定的元素中移动的行为。             实例:鼠标指针元素上移动执行表达式。             ...ng-paste指令不会覆盖元素的原生onpaste事件,事件触发,ng-paste表达式与原生的opaste 事件都会执行。         ...ng-show         描述:显示隐藏HTML元素。         实例:复选框选中显示部分内容。

3K100

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular 的数据绑定是自动从模型和视图间同步数据,Angular的这种数据绑定实现让你可以将应用的模型和视图的数据看作一个源, 视图在任何时候都是对模型的一个投影,模型发生变化,相关的视图也会发生变化...debug情况检查作用域: 右键点击元素,选择inspect element,你将看到浏览器调试器中高亮元素; 调试器允许你控制台用$0变量,去访问当前选中元素。...回调执行完成后,浏览器重新渲染dom,然后返回继续等待更多的事件浏览器调用的js代码不在angular执行上下文,意味着angular无法发现模型的修改。...如果watch修改了模型的值,将会触发一次 Creation / 创建 根作用域应用启动的时候由$injector创建,template linking阶段和指令将会创建新的子作用域; Watcher...$watchCollection(watchExpression,listener))检测一个数组一个对象内的变化:项目添加,删除,或者重新排序时会被监测到。

13.2K20

前端基础-事件

事件名称 何时触发 focus 元素获得焦点 blur 元素失去焦点 <input type="text" id="t" value="请<em>输入</em>用户名" onfocus="f1(...<em>事件</em>名称 何时<em>触发</em> mouseenter 指针移到有<em>事件</em>监听的<em>元素</em>内 mouseover 指针移到有<em>事件</em>监听的<em>元素</em>或者它的子<em>元素</em>内 mousemove 指针<em>在</em><em>元素</em>内移动<em>时</em>持续<em>触发</em> mousedown...). mouseleave 指针移出<em>元素</em>范围外(不冒泡) mouseout 指针移出<em>元素</em>,或者移到它的子<em>元素</em>上 select 文本被<em>选中</em>(input标签、textarea标签) copy <em>元素</em>内容<em>被</em>拷贝<em>时</em>...alert('re'); } 2.3.6 内容变化<em>事件</em> change: <em>当</em>内容改变且失去<em>焦点</em><em>时</em><em>触发</em> (存储<em>事件</em>) input : <em>当</em>内容改变<em>时</em><em>触发</em> (值变化<em>事件</em>) <body...<em>当</em>点击<em>div</em>1<em>时</em>,<em>触发</em> <em>事件</em>1,但是,紧跟着,<em>事件</em>2和<em>事件</em>3也<em>被</em><em>触发</em>了; 这种现象,我们称为 <em>事件</em>冒泡 <em>在</em>JS<em>中</em><em>当</em>一个<em>事件</em>发生以后,它会在不同的DOM节点之间传播。

1.3K10

4-Jquery学习四-事件操作

应是selector的祖辈元素,selector触发事件可以其祖辈元素事件捕获,从而以"代理"的形式触发事件。...2-triggerHandler()触发事件只针对jQuery对象的第一个匹配元素。 3-triggerHandler()触发事件不会在DOM树冒泡,因此事件不会冒泡传递到它的任何祖辈元素。...该函数也可用于触发resize事件。此外,你还可以额外传递给事件处理函数一些数据。 resize事件会在元素的尺寸大小调整触发。该事件常用于window对象(浏览器窗口)框架页面。...,可以获得鼠标光标焦点元素主要是表单输入元素(只有获得焦点后才可能失去焦点)。...22,select select事件会在文本框的文本内容被选中触发。该事件仅适用于和文本框。

4.4K90

浅谈逻辑选择器 -- 父选择器它来了!

对于 div :is(p, #text-id),is:() 内部有一个 id 选择器,因此,该条规则匹配元素,全部都会应用 div #id 这一级别的选择器优先级。...:where() 的优先级总是为 0 这一点使用的过程需要牢记。 组合、嵌套 CSS 选择器的一个非常大的特点就在于组合嵌套。...:not(*) 问题 使用 :not(*) 将匹配任何元素元素,因此这个规则将永远不会被应用。 相当于一段没有任何意义的代码。 :not() 不能嵌套 :not() 禁止套娃。...有了这个伪类,就可以做到,当用户使用鼠标操作可聚焦元素,不展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点,利用 :focus-visible,让可获焦元素获得一个较强的表现样式。...因为键盘用户使用 Tab 尝试切换焦点的时候,会因为 outline: none 而无所适从。

1.5K50

JQ事件事件对象

()/mouseout()和mouseenter()/mouseleave()的区别    首先来了解一下事件冒泡和捕获     事件冒泡:内部事件触发,然后触发外部事件     事件捕获:外部事件触发...,如果鼠标移入所选元素的后代,不会触发(增加阻止事件冒泡功能) <...change()  :元素发生改变触发事件     6 select():当选中单行文本text或者多行文本areatext触发事件    7 submit()  :表单提交事件  //focus...()和focusin() 的区别   focusin可以元素上检测子元素获得焦点的情况 而focusout可以元素上检测子元素失去焦点情况  四 其他事件   1 scroll()滚动滚动条触发事件...DOM元素        3  event.currentTarget 事件冒泡阶段的当前DOM元素,等同于 this         4 event.pageX/event.pageY   鼠标相对于文件左侧和顶部的位置

4.1K20

jQuery Cheat—Sheet(jQuery学习笔记)

在下面的实例点击事件某个 元素触发,隐藏当前的元素: $("p").click(function(){ $(this).hide(); }); 双击事件 双击元素,会发生...在下面的实例双击事件某个 元素触发,隐藏当前的元素: $("p").dblclick(function(){ $(this).hide(); }); 鼠标穿过事件 当鼠标指针穿过元素...下面实例,鼠标移入元素触发mouseenter,弹出“Mouse up over p1!”警告框; 鼠标移出元素触发mouseleave,弹出“Bye!...; }); 获得焦点事件 元素获得焦点,发生 focus 事件通过鼠标点击选中元素通过 tab 键定位到元素,该元素就会获得焦点。...$("input").focus(function(){ $(this).css("background-color","#cccccc"); }); 失去焦点事件 元素失去焦点,发生 blur

16.2K30

AngularDart4.0 指南- 表单 顶

你还没有使用Angular。 没有绑定额外的指令,只是布局。 模板驱动的表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...Angular可不使用Bootstrap类任何外部库的样式。 Angular的应用程序可以使用任何CSS库不使用。...如果您忽略原始状态,则只有该值有效才会隐藏该消息。 如果您使用新(空白)英雄无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。 表单提交目前是无用的。...您将看到表格显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 您单击编辑按钮,该表消失,并且可编辑的表单重新出现。

17.4K30

JavaScript 编程精解 中文第三版 十五、处理事件

这种方法执行时间密集计算非常危险,因为你可能错过按键事件。 一些原始机器可以像那样处理输入。有一种更进一步的方法,硬件操作系统发现按键时间并将其放入队列。...要注意什么时候输入了内容,每当用户更改其内容,可以键入的元素(例如和标签)触发"input"事件。为了获得输入的实际内容,最好直接从焦点字段读取它。...调用滚动事件的preventDefault无法阻止滚动。实际上,事件处理器是进行滚动之后才触发的。 焦点事件 元素获得焦点,浏览器会触发其上的focus事件。...失去焦点元素会获得blur事件。 与前文讨论的事件不同,这两个事件不会传播。子元素获得失去焦点,不会激活父元素的处理器。 下面的示例,文本域拥有焦点时会显示帮助文本。...类似于焦点事件,装载事件是不会传播的。 页面关闭跳转(比如跳转到一个链接),会触发beforeunload事件。该事件用于防止用户突然关闭文档而丢失工作结果。

5.5K20

21.jQuery

//元素获得焦点,触发 focus 事件 $("input[type=text]").blur() //元素失去焦点,触发 blur事件 $("button").mousedown()//按下鼠标触发事件...$("button").mouseup() //元素上放松鼠标按钮触发事件 $("p").mousemove() //当鼠标指针指定的元素中移动触发事件 $("p").mouseover...() //当鼠标指针位于元素上方触发事件 $("p").mouseout()  //当鼠标指针从元素上移开触发事件 $(window).keydown() //键盘按钮按下触发事件...$(window).keypress() //键盘按钮按下触发事件,每输入一个字符都触发一次 $("input").keyup() //按钮松开触发事件 $(window)....//元素的值发生改变触发事件 $("input").select() //input 元素的文本被选择触发事件 $("form").submit() //提交表单触发事件 $

2.9K90

又一个前端框架 - dagger.js

-- 可以在其他指令访问或者修改message --> ... +loading 指令宿主元素div)初始化时由框架触发调用。...作用域数据宿主元素销毁由框架自动移除,无需开发者手动管理。 指令 dagger.js ,除去生命周期指令之外,还有两种重要的指令类型:控制指令和事件处理指令。...当用户修改 a b 的值,将首先触发指令 watch#1 重新计算,更新字段 c 的值。...事件处理指令 与控制指令相比,事件处理指令的用法更加简单。事件处理指令由用户操作系统事件触发调用,执行过程不会对作用域数据进行依赖收集。...> 点击按钮将切换作用域字段 exist 的值,进而触发声明了 $exist 指令的 span 元素加载移除。

2.5K20

你会在浏览器打断点吗?我会!

❝一旦使用 monitorEvents 监控了某个元素上的事件元素触发相应类型的事件,浏览器会在控制台中打印相应的事件信息,包括事件类型、事件目标等。...keyup', 'keydown']); 然后,我们还可以控制台的Element中直接选中元素,然后Console输入对应的指令 特定元素触发对应的事件后,控制台就会打印除对应的Event的信息...输入要在其上中断的字符串。这个字符串出现在任何 XHR 请求的 URL ,DevTools 会暂停。 按 Enter 确认。 点击查询后,我们就可以指定的接口查询,进行断点处理。...勾选其中一个类别,以便在该类别的任何事件触发暂停,展开该类别并选择特定的事件。 创建事件监听器断点。...我们可以自由移动鼠标到开发工具而不失去元素 JS 执行暂停,我们就可以检查元素、编辑其 CSS、 JS 控制台中执行命令等。 ❝检查依赖于特定光标位置、焦点等 DOM 很有用。

35810
领券