jquery 事件

事件监听

监听click事件

window.addEventListener("click",function(evt){
	for(var i in evt)
	{
	    console.log(i + "---" + evt[i]);
	}
},false);

给未来或者新添加的元素绑定事件

想给相同class的元素绑定事件，包括之后新建的含有同一个class的元素
可以绑定在document上

事件捕获与事件冒泡

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件

以下面的结构为例：
html：

<div class="first">
	testFirst
	<div class="second">
		testSecond
		<div class="third">
			testThird
		</div>
	</div>
</div>

js：

$(".first").click(function(){
    console.log('first');
  });
  $(".second").click(function(){
    console.log('second');
  });
  $(".third").click(function(){
    console.log('third');
  });

默认情况下，点third，三个事件都会触发，触发顺序为third,second,first.这种方式叫做冒泡触发。

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：如 addEventListener(event, function, useCapture); addEventListener(“事件名” , “事件处理函数” , “布尔值”); (注：事件名不含"on",如“click”)

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除
错误代码示例，下面这种方式无法移除：

dom.addEventListener('touchmove', function (event) {
    // code
},false);
dom.removeEventListener('touchmove', function (event) {
    // code
},false);

这个例子中，使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

正确用法示例：

var list_hover = function() {
    var dir = event.wheelDelta > 0 ? 'Up' : 'Down';
    if (dir == 'Up') {
      $(this).scrollTop($(this).scrollTop() - 20);
    } else {
      $(this).scrollTop($(this).scrollTop() + 20);
    } 
    event.stopImmediatePropagation();
    return false;
  }
document.body.addEventListener('mousewheel', list_hover, true);
document.body.removeEventListener('mousewheel', list_hover, true);

radio点击事件监听里修改checked

• 问题： radio点击事件监听里修改checked不起作用
• 原因： 事件监听可能发生在radio的选中之前，修改成功之后会被重新渲染
• 解决方式： 修改checked加settimeout

$(document).on('click', 'input:radio', function(){
  var radio_obj = $(this).parents("#id").find('.radio').not($(this).closest(('.radio'))); 
  setTimeout(function(){ 
    radio_obj.each(function() {
      $(this).find("input[type='radio']").eq(0).prop('checked', true);
    });
   }, 10);
})