js动态添加onclick事件可传参数与不传参数

1）当方法没有参数时，赋值可以直接用onclick = 方法名

window.onload = function() {
	$('btnTest').onclick = test; 
}

function test() {
	alert("hello mimvp.com");
}

2）当方法有参数时，用onclick = 方法名(参数)时就有错了，需要在方法名前面加function()

window.onload = function() {
	$('btnTest').onclick= function() { test("hello mimvp.com") }; 
}

function test(val) {
	alert(val);
}

JS中的事件delegate（代理/委托）

1. 概念

事件代理/委托：顾名思义，一件事情本需要自己做，但自己委托给别人做了，这就是事件的代理/委托；

在JS中什么情况下会使用到事件委托呢？

倘若需要给很多类似的元素添加相同的事件，可以通过将事件添加到他们共同的父元素上来触发处理函数。

2. 原理介绍

为什么添加到父元素身上便可触发处理函数呢？

这主要是因为浏览器的捕获与冒泡机制，下面以点击li为例进行说明

one

two

three

four

five

当鼠标点击li元素时，浏览器处理DOM事件的基本流程如下：

事件捕获：当单击li时，顶层对象document会发出一个事件流，从DOM树的根节点向目标节点（被点击的对象）流去，直到到达事件真正发生的目标；在此过程中，事件相应的监听函数不会被触发；

事件目标：当事件流到达事件目标时，相应的响应事件会被触发，如若没有则不做出任何反应；

事件冒泡：与事件捕获的过程相反，沿着DOM树从事件目标向外流去，在此过程中，如若有节点绑定了相应的处理函数，则触发该函数；如若想阻止冒泡事件，可使用e.stopPropagation()或者e.cancleBubble();

3. 使用方法

按照上述原理，如若想要给li添加click事件，可直接在ul上添加click事件。

这是因为单击li时，冒泡过程中，会触发ul的点击事件，同样达到触发li元素事件的效果；

上述语句所对应的代码改进如下：

原始代码：

div_container.onclick = function(){
	alert("div");
}

var list = document.getElementByIdx_x_x("list");
var litest = document.getElementsByTagName_r("li");
for(var i = 0;i
	litest[i].onclick = function(){
		alert(this.innerHTML);
	}
}

改进后代码：

div_container.onclick = function(){
	alert("div");
}

var list = document.getElementByIdx_x_x("list");
list.addEventListener("click",function(e){
	if(e.target && e.target.nodeName.toUpperCase() =="LI"){
		alert(e.target.innerHTML);
	}
});

4. 事件委托的优点

（1）可以大量节省内存占用，减少了事件注册；

（2）当需要对li进行增加或删除时，不需要对元素再次进行事件绑定；

参考推荐：

jQuery 事件 - delegate() 方法 （W3School）

js中事件绑定,$("body").on("click")与$("").click()区别