jQuery on绑定事件

//事件的绑定和解绑
//4-1 on()的多事件绑定
jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法：on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#ID").click(function(){}) //快捷方式
$("#ID").on(‘click’,function(){}) //on方式
最大的不同点就是on是可以自定义事件名，
多个事件绑定同一个函数
$("#ID").on(“mouseover mouseout”,function(){ });
//鼠标移入和鼠标移除事件
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#ID").on({
mouseover:function(){},
mouseout:function(){}，
click:function(){}
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
//给元素绑定一个点击事件 on方式
$("#div1").on(‘click’, function (e) {//事件对象看最下面：
//e为事件对象 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
$(this).text(“触发事件：” + e.type);
console.log(e);//浏览器控制台看输出结果
/*event.target
target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
*/
});
//多个事件绑定同一个函数
$("#div2").on(“mousedown mouseup”, function (e) {
$(this).text(“触发事件：” + e.type);
});
//多个事件绑定不同函数
$("#div3").on({
mousedown: function (e) {
$(this).text(“触发事件：” + e.type);
},
mouseup: function (e) {
$(this).text(“触发事件：” + e.type);
}
});

原文链接：https://blog.csdn.net/weixin_44555613/java/article/details/92760264