事件绑定 事件委托

1.在dom元素中直接绑定

<div onclick="myAlert()">
function myAlert(){ }

2.在JavaScript代码中绑定

document.getElementById("demo").onclick = function () {
  alert(this.getAttribute("type"));
}

3.绑定事件监听函数

el.addEventListener("click",function(){},false);
el.removeEventListener("click",function(){},false);

//兼容

function addEvent(element, type, handle) {
  try {  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    element.addEventListener(type, handle, false);
  } catch (e) {
    try {  // IE8.0及其以下版本
      element.attachEvent('on' + type, handle);
    } catch (e) {  // 早期浏览器
      element['on' + type] = handle;
    }
  }
}
function handle() { alert(1); }
addEvent(document.getElementById("demo"), "click", handle);

//  或者
//  if (element.addEventListener) {
//  } else if (element.attachEvent) {
//  } else { }

jQuery的事件处理

$('a').bind('click', function () { });
$('a').live('click', function () { });
$('a', $('#container')[0]).live('click', function () { });

 

为ui下每个li绑定点击事件

不用事件委托

function addListeners4Li(liNode) {
  liNode.onclick = function clickHandler() {
    console.log(this);//<li id="post-3">Item 3</li>
  };
}
window.onload = function () {
  var ulNode = document.getElementById("ul");
  var liNodes = ulNode.getElementsByTagName("Li");
  for (var i = 0, l = liNodes.length; i < l; i++) {
    addListeners4Li(liNodes[i]);
  }
};

不用事件委托

var oUl = document.getElementById("ul");
oUl.onclick = function (e) {
  var e = e || window.event;
  var target = e.target || e.srcElement;

  //ie：window.event.srcElement//标准下:event.target
  if (target.nodeName.toLowerCase() == "li") {
    console.log(target);//<li id="post-3">Item 3</li>
    console.log(this);//<ul...
  }
};

事件委托

$("#ul").delegate("li", "click", function(){
  console.log(this);
});