jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:
- 优点: 操作简单,且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。
语法
演示代码
<body><div></div><script>$(function() {// 1. 单个事件注册$(\"div\").click(function() {$(this).css(\"background\", \"purple\");});$(\"div\").mouseenter(function() {$(this).css(\"background\", \"skyblue\");});})</script></body>
1.2. jQuery 事件处理
因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下:
- on(): 用于事件绑定,目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
1.2.1 事件处理 on() 绑定事件
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
语法
演示代码
<body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function() {// (1) on可以绑定1个或者多个事件处理程序// $(\"div\").on({// mouseenter: function() {// $(this).css(\"background\", \"skyblue\");// },// click: function() {// $(this).css(\"background\", \"purple\");// }// });$(\"div\").on(\"mouseenter mouseleave\", function() {$(this).toggleClass(\"current\");});// (2) on可以实现事件委托(委派)// click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li// $(\"ul li\").click();$(\"ul\").on(\"click\", \"li\", function() {alert(11);});// (3) on可以给未来动态创建的元素绑定事件$(\"ol\").on(\"click\", \"li\", function() {alert(11);})var li = $(\"<li>我是后来创建的</li>\");$(\"ol\").append(li);})</script></body>