• on()的多事件绑定
  • on()的高级用法
  • 卸载事件off()方法


on()的多事件绑定

之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法: * .on( events ,[ selector ] ,[ data ] )*

最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看

多个事件绑定同一个函数

$("#elem").on("mouseover mouseout",function(){ });

通过空格分离,传递不同的事件名,可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello example
$( "button" ).on( "click", {
  name: "example"
}, greet );

可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的


on()的高级用法

针对自己处理机制中,不仅有on方法,还有根据on演变出来的live方法(1.7后去掉了),delegate方法等等。这些方法的底层实现部分 还是on方法,这是利用了on的另一个事件机制委托的机制衍变而来的

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器,简单的来描述下

参考下面3层结构

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
</div>

给出如下代码:

$("div").on("click","p",fn)

事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数


卸载事件off()方法

  • 通过.on()绑定的事件处理程序
  • 通过off() 方法移除该绑定

根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁

$("elem").off()


java pdf 遗传算法编程 遗传算法 cuda

前言通过代码解释遗传算法解决旅行商问题的思路(CUDA版本,使用GPU并行加速)。 首先,定义常量参数const int nCities = 99; //城市数量 const int GEN_OUT = 15; //最大代数 const int GEN_IN = 1; //最大代数 const int UNIT_NUM = 20000; //群体规模为20000 const int BlockDI

cv2遍历像素 python python cv2 imshow

第十一节:Template Matching(模板匹配)功能:模板匹配 # Template Matching 输出结果: 参考链接:(1)python[::-1]的用法讲解 # [m : ] 代表列表中的第m+1项到最后一项 # [ : n] 代表列表中的第一项到第n项 import numpy as np a=[1,2,3.4,5] print(a) [ 1 2