Javascript addEventListener 到 AngularJS 中的简单指令示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37981800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
addEventListener to simple directive example in AngularJS
提问by noi.m
Trying to get thisvery basic directive example to work. From some investigation, 'elem' seems to be an object of HTMLHeadingElement(which inherits from Element). Not sure why elem.addEventListenerwould not work. Also, elem.bindseems to work however this isn't the global bind, right?
试图让这个非常基本的指令示例工作。从一些调查来看，'elem' 似乎是HTMLHeadingElement（继承自 Element）的对象。不知道为什么elem.addEventListener不起作用。另外，elem.bind似乎可以工作，但这不是全局 bind，对吗？
Also, would be great if someone could touch upon Document Object Model (DOM) Level 2 HTML Specification vs Document Object Model (DOM) Level 1 Specification. Happened to come across this for the first time, is this a new Object hierarchy for DOM elements?
此外，如果有人可以触及文档对象模型 (DOM) 级别 2 HTML 规范与文档对象模型 (DOM) 级别 1 规范，那就太好了。碰巧第一次遇到这个，这是DOM元素的新对象层次结构吗？
Below is the link function of my directive:-
以下是我的指令的链接功能：-
link: function(scope, elem, attrs) {
// elem will be HTMLHeadingElement object!
scope.name = 'New Micheal!';
elem.addEventListener('click', function(e) {
elem.css('background-color', 'red');
})
/*elem.bind('mouseover', function(e) {
elem.css('background-color', 'red');
});
elem.bind('mouseout', function(e) {
elem.css('background-color', 'white');
});*/
}
采纳答案by Andrew Eisenberg
elemis a jquery (or jqlite) wrapped element. It is not an instance of HTMLHeadingElement(although the underlying wrapped instance can be accessed).
elem是一个 jquery（或 jqlite）包装元素。它不是 的实例HTMLHeadingElement（尽管可以访问底层包装的实例）。
To add the click handler, you should be using: elem.click(function(e) { ... });instead of addEventListener.
要添加点击处理程序，您应该使用:elem.click(function(e) { ... });而不是addEventListener。
EDIT
编辑
The above approach only works if you are using jquery proper (not jqlite). However, in general, you should not be adding handlers through JS. The angular way is to do this in the template.
上述方法仅适用于正确使用 jquery（而不是 jqlite）的情况。但是，一般来说，您不应该通过 JS 添加处理程序。角度方式是在模板中执行此操作。
Something like this:
像这样的东西：
scope.colorHandler = function() {
elem.css('background-color', 'red');
});
And in the template:
在模板中：
template: '<div ng-click="name = \'colorHandler()\'"><h3>Hello {{name}}!!</h3></div>',
In this example, clicking on the divwill call the color handler.
在本例中，单击div将调用颜色处理程序。
This is still not canonical angular, since you should be handling css changes through changes in css classes and ng-class, but this is getting closer and I hope it illustrates the point.
这仍然不是规范的 angular，因为您应该通过 css 类和 的更改来处理 css 更改ng-class，但这越来越近了，我希望它说明了这一点。
回答by charlietfl
elemisn't a DOM element it is a jQlite object (angular.element) or a jQuery object if jQuery included in page before angular.js
elem不是 DOM 元素，它是 jQlite 对象（angular.element）或 jQuery 对象（如果 jQuery 包含在 angular.js 之前的页面中）
The DOM node is elem[0]
DOM 节点是 elem[0]
Can use the angular.element APIwhich is a subset of jQuery methods.
可以使用angular.element API，它是 jQuery 方法的一个子集。
For click listener would be:
对于点击侦听器将是：
elem.bind('click',handlerfunc);
This isn't the global bind()
这不是全局 bind()
No...it's part of above API and matches jQuery bind()
不...它是上述 API 的一部分并匹配 jQuery bind()
bind()(deprecated, useon()) - Does not support namespaces, selectors or eventData
bind()(deprecated, useon()) - 不支持命名空间、选择器或 eventData
回答by MeTe-30
You have 2 jQlite and javascript options:
您有 2 个 jQlite 和 javascript 选项：
javascript:
javascript:
elem[0].addEventListener('click', function(e) {
elem.css('background-color', 'red');
});
jQlite:
jQlite:
elem.bind('click', function(e) {
elem.css('background-color', 'red');
});
