事件

事件

//  jquery对象.事件类型(function(){执行代码})
// $("#btn").click(function(){
//     console.log(123);
// });

// $(window).load(function(){
//     // 当前页面所有资源加载完成再加载本事件
// });
// $(document).ready(function(){
//     // 当前页面所有资源加载完成再加载本事件
// });
// $(function(){
//     // 当前页面所有资源加载完成再加载本事件
// })
// 在jquery绑定事件的方式除了使用事件类型的方法之外，还可以使用on方法来绑定事件 - 跟addEventListener相似
// $("#btn").on("click",function(){
//     console.log(123);
// });

// on方法可以做事件委托 - 第二个参数是委托的元素
// $(".box").on("click",".small",function(){
//     console.log(123);
// });

// on方法可以给执行的函数传参 - on方法的第三个参数是一个数组，数组中的数据会绑定在事件对象上，作为data属性的值
// $(".box").on("click",".small",[1,2],function(e){
//     console.log(e);
//     // jquery事件的事件对象，是没有兼容问题的
// });
// $(".box").trigger("click");

// 只能执行一次的事件 - 绑定后只能触发一次   one
// $(".box").one("click",function(){
//     console.log(123);
// });


// 二合一的事件：将鼠标移入和鼠标移出的事件作为一个事件 hover
// $(".box").hover(function(){
//     // 移入的时候触发
//     console.log("进来了");
// },function(){
//     // 移出的时候触发
//     console.log("出去了");
// });
// 解绑事件 off
// 先给box绑定单击事件
$(".box").click(a);
$(".box").click(b);
function a(){
   console.log("点击了大盒子");
}

function b(){
   console.log("第二次点击");
}
// 点击按钮解绑事件
// $("#btn").click(function(){
//     $(".box").off("click",a);
// });
/*
jquery事件：
正常是 元素.事件类型(毁掉函数)
on方法 元素.on(事件类型,[委托的子元素,需要的参数数组],function(e){
   传进来的参数在事件对象的data属性中
   jquery的事件对象没有兼容性问题 - 其实，只要使用jquery就不用考虑兼容，jquery都把兼容问题给解决了
   // jquery3的版本 - 最新版本 - 版本1之后的版本不再兼容ie8及其以下的浏览器
})
off方法 元素.off(事件类型,[函数名称])
one方法 元素.one(事件类型,函数)
hover方法 元素.hover(function(){鼠标移入要执行的函数},function(){鼠标移出要执行的函数});
*/