Angular如何响应DOM event

简介: Angular如何响应DOM event

To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.


语法:将dom事件的名称用圆括号包裹起来,再附上一个加上了双引号的模板声明。


例子:


Click me!


看另一个例子:


 

Jerry Template reference variable test

 

 

{{box.value}}

1

2

3

运行效果:


当用户在input字段输入值时,输入值会自动出现在input element正下方的p element里。


然而template reference变量#box之后的 (keyup)="0"的含义是什么?


Angular updates the bindings (and therefore the screen) only if the app does something in response to asynchronous events, such as keystrokes. This example code binds the keyup event to the number 0, the shortest template statement possible. While the statement does nothing useful, it satisfies Angular’s requirement so that Angular will update the screen.


原来,Angular框架只有当应用响应某些同步或者异步事件,比如键盘敲击,鼠标点击时

目录
相关文章
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
120 1
|
3月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
34 0
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
40 0
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
【4月更文挑战第14天】JavaScript中的事件处理包括冒泡和捕获两个阶段。事件冒泡是从根节点向目标元素逐级向上传播事件,允许在元素内部捕获外部事件。事件捕获则相反,从根节点向下到目标元素,使得外部能捕获内部事件。`addEventListener`方法用于添加事件监听器,通过`useCapture`参数切换冒泡或捕获阶段处理事件,默认为`false`(冒泡阶段)。兼容性考虑,推荐使用`addEventListener`。
49 0
|
6月前
|
JavaScript
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
|
中间件
Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
|
JavaScript 前端开发
详细解析DOM事件的event事件对象(二)
详细解析DOM事件的event事件对象(二) 上篇博客说到了DOM的键盘事件和鼠标事件的event对象,这次我们再来聊一聊event对象剩下的属性。 HTML代码: <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> 1 2 3 4 5 CSS代码: *{ margin: 0;
|
JavaScript 前端开发
详细解析DOM事件的event事件对象(一)
JavaScript 86 篇文章 7 订阅 订阅专栏 详细解析DOM事件的event事件对象(一) 近期我们一直在学习DOM,马上到了尾期了,今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。 HTML代码: <form> <input type="text" id="text"> <!-- <input type="submit"> --> <button>登录</button> </form> 1 2 3 4 5 1.键盘事件