AI智能
改变未来

jQuery事件注册及处理

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>
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery事件注册及处理