jQuery学习笔记四（jquery事件注册）

1，jQuery事件和原生js事件比较

原生js注册相同的事件之后，后面注册的会覆盖掉前面注册的，而jQuery事件，后面注册的不会覆盖前面注册的，这增强了事件处理能力。

2，jQuery事件绑定方式

  • 简单事件绑定 .eventName(fn);
    不支持同时注册多个事件，也不支持动态注册
    $(".button").click(function(){});
  • bind方式注册事件
    支持同时注册，不支持动态注册
  • delegate事件委托
    支持同时注册，也支持动态注册
    $("body").on("click","div",function(){});
  • on方式统一事件注册方式
    on方式支持同时注册，不使用委托注册就不支持动态注册
    $("div").on("click",function(){console.log("事件")}) on使用委托注册，支持动态注册，原理是事件冒泡。委托者必须是该元素的父元素，给父元素注册事件，点击div会有一个事件冒泡，会触发父元素的事件。
    $("body").on("click","div",function(){});
  • 当一个元素绑定了事件之后，就可以使用类似 $("#div").click()的方式调用事件

3，jQuery解绑事件

  • off()函数
    使用on()方式绑定事件，使用off()方式解绑事件。如果不给参数就是解绑所有的事件，给参数就是解绑指定的事件。

4，jQuery事件触发

  • trigger()函数
    作用：
  1. 使用代码方式触发事件
  2. 触发自定义事件

5，jQuery事件冒泡和元素默认行为

  • 事件冒泡
    定义：触发子元素事件时，也会触发父元素的事件。
    避免：在子元素的回调函数中return false;或者添加event参数使用event.stopPropagation()
  • 默认行为
    定义：元素的默认行为，例如：a元素的超链接跳转行为。
    避免：在回调函数中使用return false; 或者添加event参数使用event.preventDefault();

6，jQuery事件委托

  • jQuery 事件委托
    定义：请别人帮我们做事情，并反馈结果。
    新增的li没有点击事件，将li的事件委托给ul监听处理，因此新增的li也能有点击事件了。
$("ul").delegate("li","click",function(){});
  • 也可以使用on方式实现事件委托
$("body").on("click","div",function(){});

7，jQuery自定义事件

  • 自定义事件必须通过on来绑定
  • 自定义事件必须由trigger来触发
$(".son").on("click.cjh",function(){});
$(".son").trigger("click.cjh");

8，jQuery其他

- jQuery的隐式迭代
jQuery中如果选择器可以找到零个，一个或多个元素找到多个元素；当找到的是多个元素的时候，得到的实际上是一个元素的集合，执行设置操作的时候，会对所有的元素进行设置操作（获取值的时候只返回第一个元素的值）。

  • js不支持隐式迭代：
var lis = document.getElementsByTagname('li');
for（var i=0；i<lis.length;i++）{
lis[i].index = i;
 lis[i].onclick = function(){
	lis[lis[i].index].style.background = "red";
}
}
  • jQuery支持隐式迭代
$("li").on("click",function(){
	$(this).css("background","red");
});

很明显，jQuery更加的简单方便。

- jQuery的链式编程
给jQuery对象使用一个方法，该方法如果返回一个jQuery对象（大多数的方法（设置方法）都是返回一个jQuery对象，例如：css设置返回值，属性设置返回值，宽高设置返回值，动画设置返回值，选择器返回值，绑定事件返回值等），就可以再次调用jQuery方法；当然，如果这个对象不是我们想要的，我们就不能不要再调用jQuery方法了。
- end()方法
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
也可以说end() 返回上一个状态。改变jQuery对象，使回到上一个状态 end方法也是jQuery方法，需要在jQuery对象上使用