jquery之事件

1.页面载入

$(document).ready(function () {
    
 })
 //或者简写形式为：
$(function () {
    
})

2.事件处理

on(eve,[sel],[data],fn)1.7+ 在选择元素上绑定一个或多个事件的事件处理函数。
off(eve,[sel],[fn])1.7+ 移除
bind(type,[data],fn)3.0-
one(type,[data],fn) 一次性事件
trigger(type,[data]) 自动触发事件
triggerHandler(type, [data])
unbind(t,[d|f])3.0-

• on和off

参数data:触发事件时传递的数据

$("#btn").on("click",objall,function (e) {
     console.log(e.data);
     //如何获得json数据中的单个值
     for(var i=0;i<e.data.length;i++){
         console.log(e.data[i]);
         console.log(e.data[i].天气);
     }
})

绑定多个事件

$("#btn").on("click mouseenter mouseleave",method);//此处函数名字不带括号
function method(e){
    //如何区分每一个事件
    if(e.type=="click"){
        console.log("单击");
        //单击时移除鼠标进入事件
        console.log($(this));
        //$(this).off("mouseenter");
        $(this).off("mouseenter",method);//off   参数可写可不写
    }
    else if(e.type=="mouseenter"){
        console.log("鼠标进入");
    }
    else{
        console.log("鼠标离开");
    }
}

on和off 中的参数 sel （选择器） 委托 父元素将自身的事件委托给子元素来执行

//selector  是一个选择器字符串   $(".li2")  直接写  ".li2"
$("ul").on("click",".li2",method2);
function method2() { 
     //ul的单击事件委托给了li2执行
     console.log(1);
     console.log($(this)); //当事件委托之后  事件内部的$(this)  指针发生变化
     //$("ul").off("click");
     //$("ul").off("click",".li2");
     $("ul").off("click",".li2",method2);
}

json数据
对象类型的数据（即数据型）

var obj={"年份":"2020","月":"2","日":"周五"}; //单个json数据
var objall=[
    {
        "年份": "2020",
        "月": "2",
        "日": "周五",
        "天气": [
            {"多云": "15度"},
            {"晴天": "30度"}
        ]
    },
    {
        "年份": "2019",
        "月": "2",
        "日": "周五",
        "天气": [
            {"多云": "15度"},
            {"晴天": "30度"}
        ]
    },
    {
        "年份": "2018",
        "月": "2",
        "日": "周五",
        "天气": [
            {"多云": "15度"},
            {"晴天": "30度"}
        ]
    }
]

• bind和unbind-----与on off一致

//bind 绑定多个事件用空格隔开    ------与on off一致
$("#btn").bind("click mouseout",obj,method1);
function method1(e) {
     console.log(e.data);//所传的数据
     if(e.type=="click"){
         console.log("单击");
         $(this).unbind("mouseout",method1)
     }
     else{
         console.log("鼠标离开");
     }
}
//移除事件,若不写参数则全部移除
//$("#btn").unbind();

• one

  所传参数data不能是一个字符串

var shuzhi=1;
//var shuzhi=true;
//var shuzhi=[1,2,3];
$("#btn").one("click",shuzhi,function (e) {
    console.log(e.data);  //不能传递字符串
    console.log("单击");
})

• trigger

自定义事件

$("input").on("myevent",function (event,res) {
     console.log(res);
     $(this).css({
         border:"1px solid red"
     });
}).trigger("myevent",1)

自动触发click 输出是一次

 var data=[1,2,3];
 $("input").on("select",function (event,res) {
     console.log(res);
     //第一次是trigger触发的select传递的数据res存在的
     //第二次触发  是在文字被选择的时候常规触发的这个事件  所以res  undefined
     $(this).css({
         border:"1px solid red"
     });
 }).trigger("select",[data])

3.事件委派

live(type,[data],fn)1.7-
die(type,[fn])1.7-
delegate(s,[t],[d],fn)3.0-
undelegate([s,[t],fn])3.0-

4.事件切换

hover([over,]out)鼠标悬停事件，鼠标移到指定元素中，则触发第一个函数，移出则触发第二个函数
toggle([spe],[eas],[fn])1.9* 绑定多个事件，按顺序执行
类比：$(".block").on("mouseover mouseout",function () { console.log(1); })

$(".block").hover(function () {
    //over
    console.log("鼠标悬停");
},function () {
    //out
    console.log("鼠标离开");
})

// $(".block").toggle(function () {
//     console.log(1);
// },function () {
//     console.log(2);
// },function () {
//     console.log(3);
// })

5.事件

blur([[data],fn])
change([[data],fn]) 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。
focusout([data],fn) 当元素失去焦点时触发 focusout 事件。
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn]) 浏览器窗口变化事件
scroll([[data],fn])
select([[data],fn])
submit([[data],fn]) 提交表单时，会发生 submit 事件。该事件只适用于表单元素。
unload([[data],fn])1.8-

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

可以链式写事件（即连点）

$(window).resize(function () {
    console.log(1);
}).scroll(function () {
    console.log($(this).scrollTop());
})

事件对象

eve.currentTarget 当前点击的目标元素
eve.data 事件传递的数据
eve.delegateTarget1.7+ 在事件委托中 获取委托的元素（即祖先元素）
eve.isDefaultPrevented() 返回值true/false 是否使用过preventDefault
eve.isImmediatePropag…()
eve.isPropagationStopped() 返回值true/false 是否使用过stopPropagation
eve.namespace
eve.pageX
eve.pageY
eve.preventDefault() 阻止事件的默认行为
eve.relatedTarget
eve.result
eve.stopImmediatePro…()
eve.stopPropagation() 阻止事件冒泡
eve.target 执行事件的目标元素
eve.timeStamp 执行的事件 ms
eve.type 类型
eve.which 键盘上的ascii值 1 是鼠标
currentTarget 与delegateTarget区别
前者：获取当前事件的目标元素
后者：事件委托中的祖先元素，委托元素

$("ul").on("click",".li2",function (e) {
    console.log(e.currentTarget);
})
// $("ul").on("click",".li2",function (e) {
//     console.log(e.delegateTarget);
// })

键盘按下的ASCII码值

$(window).keydown(function (e) {
    console.log(e.which);
})

事件的冒泡处理

$("div").click(function (e) {
    console.log(1); //此时点击会执行两次
    //处理事件冒泡
    //e.stopPropagation();
    console.log(e.isPropagationStopped());    //返回true或false
    return false;  //也可以处理事件冒泡
})