用ng-click自动传递$ event？

25-03-03 12

想了解用ng-click自动传递$event？的新动态吗？本文将为您提供详细的信息，此外，我们还将为您介绍关于addEventListener与onclick、addEventListener和onc

想了解用ng-click自动传递$ event？的新动态吗？本文将为您提供详细的信息，此外，我们还将为您介绍关于addEventListener 与 onclick、addEventListener 和 onclick 简单比较、addEventListener、onclick和jquery的bind()、click()、addEventListener与onclick的新知识。

本文目录一览：

用ng-click自动传递$ event？
addEventListener 与 onclick
addEventListener 和 onclick 简单比较
addEventListener、onclick和jquery的bind()、click()
addEventListener与onclick

用ng-click自动传递$ event？

用ng-click自动传递$ event？

我知道，ng-click如果$event像这样传递对象，就可以访问click事件：

<button ng-click="myFunction($event)">Give me the $event</button><script>  function myFunction (event) {    typeof event !== "undefined" // true  }</script>

$event每次必须显式地通过都会有点烦人。是否可以设置ng-click为默认将其传递给函数？

答案1

小编典典

看看ng-click指令源：

...compile: function($element, attr) {  var fn = $parse(attr[directiveName]);  return function(scope, element, attr) {    element.on(lowercase(name), function(event) {      scope.$apply(function() {        fn(scope, {$event:event});      });    });  };}

它显示了如何将event对象作为参数名称
传递给ng-click表达式$event。这是通过$ parse服务完成的，该服务不允许参数渗入目标作用域，这意味着
答案为no ，您只能$event通过回调参数来访问对象。

addEventListener 与 onclick

addEventListener 与 onclick

addEventListener和有什么区别onclick？

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click",dothing2);

上面的代码一起驻留在一个单独的 .js 文件中，它们都可以完美运行。

addEventListener 和 onclick 简单比较

addEventListener 和 onclick 简单比较

首先说一下 addEventListener

语法：

element.addEventListener(event, function, useCapture)

这里的 event 是事件名，function 是相应的事件，这个 useCapture 是一个布尔值，默认是 false，就是说在冒泡阶段执行，如果为 true，就在捕获阶段执行
利用 addEventListener 可以简单复现网页中对一个对一个元素操作之后从 window-->document-->html-->body-->...--> 目标元素的捕获，然后反过来冒泡的过程
addEventListener 是 DOM2 版本中加入的

绑定事件有几种方式

Event Listeners （包含 addEventListener 和 IE 的 attachEvent）
- IE 8 以及更低版本的 IE 中，需要用 attachEvent 方法：
```
element.attachEvent(''onclick'', function() { /* do stuff here*/ });
```
- 对于 IE 9 和更高版本的 IE，以及其它浏览器，则要用 addEventListener 方法：
```
element.addEventListener(''click'', function() { /* do stuff here*/ }, false);
```
用上面这种方法（DOM level 2 events），理论上可以为一个元素绑定无数个事件，实际应用中则决定于客户端的电脑内存以及浏览器。
Inline Events
- HTML 的 onclick="" 属性，以及 element.onclick
- 在所有支持 JavaScript 的浏览器中，可以用下面的方式来添加内联的事件监听器。
```
<a id="testing" href="#" onclick="alert(''did stuff inline'');">Click me</a>
```
- 还有另一种方法
```
element.onclick = function () { /*do stuff here */ };
```

两种方案的区别：

要回答这个问题，就要考虑各个浏览器的兼容性，以及实际需求了。即使现在只需要为一个元素绑定一个事件，但是以后很可能还要同时再绑定别的事件，这个时候，就需要用 attachEvent 和 addEventListener 了，否则用内联方法就可以搞定了。

jQuery 以及其它的 JavaScript 框架，已经将各个浏览器的 DOM level 2 events 的实现以通用模型的形式封装起来了，所以通过 jQuery 可以很方便地写出适用于所有浏览器的代码：

$(element).on(''click'', function () { /* do stuff */ });

他们之间最大的区别就是 addEventListener 可以为一个元素绑定多个事件，即它允许给一个事件注册多个监听器，而 onclik 只能给元素注册一个，如果存在多个，则后面的事件会覆盖前面的

<ul id="color-list">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
</ul>
<script type="text/javascript">
    (function(){
        var addEvent = document.getElementById("addEvent");
                addEvent.addEventListener("click",function(){
                    alert("我是addEvent1");
                },false);
                addEvent.addEventListener("click",function(){
                    alert("我是addEvent2");
                },false);

        var addEvent = document.getElementById("on_click"); 

        on_click.onclick = function() {
            alert("我是click1");
        }
        on_click.onclick = function() {
            alert("我是click2");
        }
    })();
</script>

在这个例子中，red 点击之后会分别弹出我是 addEvent1 和我是 addEvent2，而 yellow 点击之后只会弹出我是 click2。

一个适用于所有浏览器的事件监听器函数

function addEventFn (ele, event, func) {
	if(ele.attachEvent) {  //IE8及更低版本的浏览器
		return ele.attachEvent(''on''+event, func);
	}
	else {  //IE8及以上浏览器，默认冒泡阶段
		return ele.addEventListener(event, func, false);  
	}
}
// 调用示例
addEventFn(
	document.getElementById("addEvent"),
	''click'',
	function () {alert(''red'')}
)

参考文章：

[译] addEventListener 与 onclick，孰优孰劣？
addEventListener 和 onclick 的区别
HTML DOM addEventListener () 方法

addEventListener、onclick和jquery的bind()、click()

addEventListener、onclick和jquery的bind()、click()

addEventListener("click",function(event){},false);

removeEventListener("click",function(event){},false);

1 target.addEventListener(type, listener, options);
2 target.addEventListener(type, listener, useCapture);
3 target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean});

addEventListener是JS原生的绑定事件函数

target默认使用window，因此通常省略。

type为事件监听类型，如“click”、"mouseup"等。

listener为监听函数，默认带有event参数，即function(event){}

useCapture Boolean 指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。沿着DOM树向上冒泡的事件不会触发被指定为use capture（也就是设为true）的listener。当一个元素嵌套了另一个元素，两个元素都对同一个事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看事件流及 JavaScript Event order 文档。如果没有指定， useCapture 默认为 false 。对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发该元素（即事件目标）上的所有监听器，而不在乎这个监听器到底在注册时useCapture 参数值是true还是false。

options可以使用一个参数也可以使用一个带有三个参数的对象

　　capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。其实就是useCapture。
　　once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
　　passive: Boolean，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

解说：

　　在事件分派时添加事件处理器,当一个 EventListener 在 EventTarget 正在处理事件的时候被注册到 EventTarget 上，它不会被立即触发，但可能在事件流后面的事件触发阶段被触发，例如可能在捕获阶段添加，然后在冒泡阶段被触发。

　　多个相同的事件处理器，同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次，也不需要用 removeEventListener 手动清除多余的EventListener ，因为重复的都被自动抛弃了。

　　处理过程中 this 的值的问题，通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。，当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。如果一个事件的属性( 例如. onClick)是指定在一个HTML的元素上的，则这个属性中的JavaScript语句实际上会被包裹在一个处理函数中，在这个处理函数中使用this的效果和使用addEventListener来绑定事件的效果是一样的； this的出现代表了元素的引用。注意到在一个函数里this调用的的效果和标准规则里面是一样的。

click()函数用于为每个匹配元素的click事件绑定处理函数。　　

　　该函数也可用于触发click事件。click事件就是鼠标按钮单击事件。此外，你还可以额外传递给事件处理函数一些数据。此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发click事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过click()绑定的事件，请使用unbind()函数。该函数属于jQuery对象(实例)。

1 jQueryObject.click( [ [ data ,]  handler ] )

　　如果指定了至少一个参数，则表示绑定click事件的处理函数；没有指定任何参数，则表示触发click事件。

参数	描述
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	可选/Function类型指定的事件处理函数。

　　jQuery 1.4.3 新增支持：click()支持data参数。参数handler中的this指向当前DOM元素。click()还会为handler传入一个参数：表示当前事件的Event对象。click()函数的返回值为jQuery类型，返回当前jQuery对象本身。

　　如果函数handler的返回值为false，则表示阻止元素的默认事件行为，并停止事件在DOM树中冒泡。例如，<a>链接的click事件的处理函数返回false，可以阻止链接的默认URL跳转行为。

经验：

　　在使用jqgrid框架开发时，需要将表格的特定行设置成不能选中，发现怎么修改click()事件，如添加函数event.preventDefault()，都不能阻止可选的上层组件监听事件。最后深入了解click的api终于发现可以在传入一个handler函数后再加一个false参数，一下就阻止了默认选中监听事件，并阻止将事件触发冒泡到table框架组件中，秀一秀代码：

 1 $(function () {
 2           setTimeout(function() {
 3               $("table tbody tr").each(function(indexTr, elementTr) {
 4                   $(elementTr).children("td[aria-describedby=''basMgmtGridIdGrid_mainItem'']:empty").
 5                       each(function (indexTd, elementTd) {
 6                       var rowid = $(elementTr).attr("id");
 7                       $(elementTr).off("click").unbind("click").click(function(event) {}, false);
 8                       $(elementTd).prevAll("td[aria-describedby=''basMgmtGridIdGrid_cb'']").
 9                           children(":checkbox").attr("disabled","disabled").remove();
10                   });
11               });      
12           }, 200);
13       });

addEventListener与onclick

addEventListener与onclick

addEventListener和onclick什么区别？

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代码一起驻留在单独的.js文件中，并且它们都可以正常工作。

#1楼

JavasSript中''this''关键字引用的上下文不同。

看下面的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <input id="btnSubmit" type="button" value="Submit" />
    <script>
        function disable() {
            this.disabled = true;
        }
        var btnSubmit = document.getElementById(''btnSubmit'');
        btnSubmit.onclick = disable();
        //btnSubmit.addEventListener(''click'', disable, false);
    </script>
</body>
</html>

它的作用非常简单。当您单击该按钮时，该按钮将被自动禁用。

首先，当您尝试以这种方式button.onclick = function(),事件button.onclick = function(),将通过单击按钮来触发onclick事件，但是不会禁用该按钮，因为button.onclick和onclick事件之间没有显式绑定处理程序。如果调试时看到''this''对象，则可以看到它指向''window''对象。

其次，如果您评论btnSubmit.onclick = disable(); 并取消注释//btnSubmit.addEventListener(''click'', disable, false); 您会看到该按钮被禁用，因为通过这种方式，button.onclick事件和onclick事件处理程序之间存在显式绑定。如果您调试到禁用功能，则可以看到''this''是指button control而不是window 。

这是我不喜欢JavaScript的不一致之处。顺便说一句，如果您使用的是jQuery（ $(''#btnSubmit'').on(''click'', disable); ），它将使用显式绑定。

#2楼

如果您不太担心浏览器的支持，则可以使用一种方法在事件调用的函数中重新绑定“ this”引用。通常，它会指向函数执行时生成事件的元素，而这并不总是您想要的。棘手的部分是要同时能够删除完全相同的事件侦听器，如本例所示： http : //jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement(''div'');
    this.element.addEventListener(''click'', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener(''click'', this.swap, false);           
    }
}

上面的代码在Chrome中运行良好，并且可能存在使“绑定”与其他浏览器兼容的问题。

#3楼

使用内联处理程序与内容安全策略不兼容，因此从该角度来看， addEventListener方法更加安全。当然，您可以使用unsafe-inline启用内联处理程序，但是，顾名思义，这样做并不安全，因为它会带回CSP阻止的所有JavaScript开发。

#4楼

尚未注意到一个细节：现代的桌面浏览器将不同的按钮按下视为AddEventListener(''click''和onclick的默认AddEventListener(''click'' 。

在Chrome 42和IE11上， onclick和AddEventListener均会在左键和中键单击时触发。
在Firefox 38上， onclick 仅在左键单击时触发，而AddEventListener单击则在左键，中键和右键单击时触发。

此外，当涉及滚动游标时，跨浏览器的中键点击行为也非常不一致：

在Firefox上，总是会触发中点击事件。
在Chrome上，如果Middleclick打开或关闭滚动光标，它们将不会触发。
在IE上，当滚动光标关闭时会触发，但在打开时不会触发。

还值得注意的是，任何键盘可选择的HTML元素（例如input “ click”事件也会在选中时触发空格或Enter键。

#5楼

也应该可以通过对原型进行扩展来扩展侦听器（如果我们有对它的引用，并且它不是匿名函数）-或使“ onclick”调用对函数库的调用（调用其他函数的函数）

喜欢

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

这意味着我们不必改变onclick调用，只需更改函数myFunctionList（）即可完成我们想要的操作，但这使我们无法控制冒泡/捕获阶段，因此对于较新的浏览器应避免使用。

以防万一将来有人找到这个线程...

今天关于用ng-click自动传递$ event？的介绍到此结束，谢谢您的阅读，有关addEventListener 与 onclick、addEventListener 和 onclick 简单比较、addEventListener、onclick和jquery的bind()、click()、addEventListener与onclick等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇使用Controller As方法访问继承的范围（controller方法调用）

下一篇将Content-type更改为“ application / json” POST方法，RESTful API（修改content-type）