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       });