ng-click和onclick的区别

最新推荐文章于 2019-12-07 16:51:46 发布
最新推荐文章于 2019-12-07 16:51:46 发布
阅读量1.3w 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/52566523
版权

这里ng-click和onclick的最主要的区别是：

ng-click的作用域是其所在的ng-controller所声明的作用域，而onclick的作用域是全局的。

另外，ng-click属于angularjs的写法，onclick是原生js的写法。

zhu jun~
关注
IOS angular ng-click ng-touch 手机延时问题，fastclick
u012366627的博客
02-15 1304
一、ng-click 延时300ms原因： 手机浏览器会去判断，点击是否为double-tap 二、不用ng-touch的原因： ng-touch 不是angular的核心指令，需要安装插件 不能移除Textareas, inputs, links, buttons, labels, etc.的延时 他会添加 touchstart, touchmove, touchcancel, t
angularJS中的ng-click和ng-change
hellochenlu的博客
08-25 2949
{{greeting.text}},AngularJS  0     1 var testFuck = angular.module('RadioExample', []) .controller
ng-click
光英的记忆博客
04-10 1297
ng-click用来指定一个元素被点击时调用的方法或表达式。 <button ng-click="count = count + 1" ng-init="count=0"> Increment count: {{ count }} Decrement angular.module('myApp',[]
angular ng-click防止重复提交实例
12-29
Angular ng-click 防止重复提交实例是一个常见的问题，在 Angular 应用程序中，如果用户在短时间内多次点击按钮，可能会导致重复提交数据，从而影响应用程序的稳定性和性能。为了解决这个问题，本文将介绍两种方法来...
AngularJS对动态增加的DOM实现ng-keyup事件示例
11-29
- 当页面加载完成后，我们使用`window.onload`事件监听页面加载完成，然后为ID为`click-to-add`的元素添加`onclick`事件监听器。 - 当该元素被点击时，它会被替换为一个输入框，输入框具有`placeholder`和`class`...
ng-lock:角装饰器，用于在任务运行时锁定功能和用户界面
04-10
NgLock 角装饰器，用于在任务运行时锁定功能和用户界面。 描述 有时需要在任务运行时锁定功能和用户界面。 该库提供了一种简单的...button (click)="onClick($event)">Click me!</button>` , styles : [ `
调用innerHTML之后onclick失效问题的解决方法
09-04
当你通过`innerHTML`替换元素的内容时，所有之前绑定的事件处理程序（如`onclick`）都将丢失，因为新插入的HTML不会自动继承...在遇到类似问题时，应当灵活运用各种DOM操作方法和事件处理策略，以确保功能的正常运行。
AngularJS的ng-click过程
老司机让开，Java新手来了
06-20 262
&lt;div ng-show="b"&gt;&lt;/div&gt;&lt;button ng-click="a()"&gt;&lt;/button&gt; 在controller里：$scope.a=function(){ $scope.b=false;} 在点击该&lt;div&gt;时，会搜寻controller.js中的$scope.a &lt;
AngularJs学习记录-(2) ng-click
XiaoQ的博客
01-16 6012
刚才学习了AngularJS的ng-click；通过一个小案例，发现AngularJS框架的方便之处; ng-click是用来告诉AngularJS当他所在的元素被点击时出发某个函数ng-click=‘fun()’； AngularJS只会在$scope中寻找你要运行的函数，并不会去搜索全局函数； ng-app="hd"> ng-controller="ctrl">
服务器端控件的OnClientClick与OnClick的区别
shirlly
10-26 247
1、OnClientClick是调用客户端的JS函数， 而OnClick用于调用后台服务器端的函数 2、OnClientClick先于OnClick执行 eg：
angularjs和js中同一个元素上如何实现ng-click（onclick），ng-dblclick(ondblclick)事件
12-07 1199
单击，双击事件相信大家应该很了解了，他们可以分别执行自己的事件，但是如果用一个元素的既有单击事件，又有双击事件，这种情况下，该如果实现各自的事件呢?看下面代码: html代码： <button onclick="single(event)" ondblclick="double(event)">按钮</button> js代码： var time = 200;...
ng-click得到当前元素
02-02 1888
http://blog.csdn.net/amohan/article/details/39249369 场景：给多个按钮绑定事件，并得到点击对象。 在最上面的元素加上点击事件，然后利用$event.target得到点击对象 看代码 ul class="result-choose" id="ResultChoose" ng-click="changeStatus($event);">
Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
weixin_33748818的博客
12-06 492
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？】 ...
AngularJS 事件绑定(ng-click)
houyanhua1的专栏
04-28 8457
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&gt; &lt;script src="angular.min.js"&g
angularjs html事件（ng-click,ng-hide,ng-show）
weixin_30631587的博客
01-23 189
ng-click:单击事件, ng-hide:控制某款元素是否隐藏，true隐藏 false 显示 ng-show：控制某款元素是否显示，true显示 false 隐藏 可以参考页面：http://www.w3cschool.cc/angularjs/angularjs-html-events.html 个人源代码如下： <!DOCTYPE html PUBLIC "-//W3...
AngularJs ngChange、ngChecked、ngClick、ngDblclick
weixin_33816300的博客
11-05 155
ngChange 当用户更改输入时，执行给定的表达式。表达式是立即进行执行的，这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同。 格式：ng-change=”value” value: 表达式。 使用代码： &lt;div ng-app="Demo" ng-controller="testCtrl as ctrl"&gt; &...
一个在Node.js上运行的vue2.6.1项目 引用了ng-form-element 2.4.5依赖。这个项目可以将下列Json数据生成一个有按钮的页面 { "list": [ { "type": "button", "event_": false, "listen_": false, "options": { "size": "mini", "type": "primary", "align": "left", "control": "", "eventName": "", "script": "", "plain": false, "circle": false, "round": false, "disabled": false }, "label": "按钮", "labelWidth": 0, "width": "100%", "span": 24, "model": "button_17466837542132", "key": "button_17466837542132", "dynamicLabel": false } ], "config": { "labelPosition": "right", "labelWidth": 150, "size": "mini", "outputHidden": true, "hideRequiredMark": false, "syncLabelRequired": false, "labelSuffix": "", "customStyle": "" } } 如何为这个按钮增加事件并调用函数
最新发布
05-10
<think>嗯，用户的问题是关于在Node.js和Vue 2.6.1项目中，使用ng-form-element 2.4.5生成的按钮组件如何绑定事件并调用自定义函数。首先，我需要回忆一下ng-form-element这个库的用法。可能用户提到的ng-form-element是类似Vue Form Element或者其他表单生成库，但具体版本是2.4.5，所以可能需要查阅相关资料。不过根据用户提供的引用内容，他们之前讨论过Vue的v-on、v-bind、v-model，以及事件处理的方法，比如@click和methods的使用。 首先，用户的问题核心在于如何为通过ng-form-element生成的按钮添加事件。根据Vue的知识，通常绑定事件可以使用v-on或@符号，比如@click。但ng-form-element可能是一个表单组件库，生成的按钮可能需要通过配置项来传递事件处理函数。 根据引用中的例子，比如引用[3]中的代码，展示了如何在Vue中使用@click绑定事件到methods中的方法。因此，可能需要用户在生成按钮的配置中指定事件处理函数，或者在模板中使用自定义事件。 不过，因为用户使用的是ng-form-element，可能需要查看该库的文档，看看如何给生成的组件添加事件监听。假设ng-form-element允许在组件上定义事件监听器，可能需要使用类似@click.native或者通过组件暴露的事件来绑定。 另外，用户提到Node.js和Vue 2.6.1，这可能意味着项目是前后端分离的，前端使用Vue，后端使用Node.js。但问题主要在前端部分，即如何在Vue组件中处理事件。 可能的步骤是：在表单配置中，为按钮定义事件类型（如click），并指定处理函数的名字。然后在Vue实例的methods中定义对应的函数。 还需要考虑是否需要使用.native修饰符，如果按钮组件是自定义组件，可能需要使用.native来监听原生事件，或者组件内部需要$emit一个自定义事件，然后在父组件中监听。 另外，用户提供的引用中有关于v-on的使用，比如@click="handle"，所以在配置生成按钮时，可能需要将事件处理函数作为属性传递，或者在生成组件时设置相应的事件监听。 可能的解决方案是，在ng-form-element的配置选项中，为按钮添加一个事件监听器，比如click事件，并指向methods中的某个函数。例如，在表单元素的配置中，设置onClick属性，或者在生成按钮时使用v-on指令。 此外，用户可能需要确保按钮组件正确暴露了事件，或者在生成按钮时能够绑定原生事件。如果ng-form-element生成的按钮是原生的button元素，那么直接使用@click即可；如果是自定义组件，可能需要组件内部处理点击事件并触发父组件的事件。 总结步骤可能是： 1. 在Vue实例的methods中定义需要调用的函数。 2. 在ng-form-element的配置中，为按钮组件添加事件绑定，比如通过事件属性如@click或自定义事件。 3. 确保事件正确绑定，可能需要使用.native修饰符或组件内部的事件触发。 需要验证ng-form-element的具体用法，但根据用户提供的引用，可能类似于在模板中直接使用@click绑定方法。因此，可能需要在生成按钮的配置项中指定事件处理函数，或者在生成组件时传递事件监听器。</think>在Node.js和Vue 2.6.1项目中，通过ng-form-element 2.4.5生成的按钮组件绑定事件需遵循以下步骤： ### 1. 定义事件处理方法 在Vue实例的`methods`中声明自定义函数： ```javascript methods: { handleButtonClick() { console.log("按钮事件已触发"); // 业务逻辑代码 } } ``` ### 2. 配置ng-form-element组件 在表单配置对象中添加事件绑定参数： ```javascript const formConfig = { elements: [ { type: 'button', label: '提交', props: { // 原生DOM事件绑定 '@click.native': 'handleButtonClick' // 或组件自定义事件绑定 '@custom-event': 'handleButtonClick' } } ] } ``` ### 3. 生成表单时传递上下文 ```javascript <ng-form-element :schema="formConfig" :context="{ methods: { handleButtonClick }, data: { /* 数据模型 */ } }"> </ng-form-element> ``` ### 注意事项 1. 如果组件封装原生按钮，使用`.native`修饰符监听原生事件[^3] 2. 自定义组件需通过`this.$emit('custom-event')`触发事件 3. 确保`formConfig.props`中定义的事件与组件实际支持的事件类型匹配 4. 通过`:context`注入当前实例的methods实现上下文绑定[^2]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值