jQuery事件

页面载入

$(document).ready(function () {

});

一、事件
事件的绑定和事件的移除

on off bind unbind
//on(eve,[sel],[data],fn)1.7+
//off(eve,[sel],[fn])1.7+
//bind(type,[data],fn)3.0-
//unbind(t,[d|f])3.0-

参数1 事件  类似JS里面的事件
参数2 执行该事件调用的函数
参数data 触发事件的时候传递的数据

$("#btn").on("click",function (){
   console.log("你点击我");
});

对象的数据类型
json类型的数据 类型即是数组型也是对象型

var obj = {"name": "张三", "sex": "男", "age": "20"};
var cla = [
         {
         "name": "张三1",
         "age": "18",
         "sex": "男",
         "hobby":[
         {"name":"篮球"},
         {"name":"乒乓球"}
         ]
         },
         
         {
         "name": "张三2",
         "age": "18",
         "sex": "男",
         "hobby":[
         {"name":"篮球"},
         {"name":"乒乓球"}
         ]
         },
         
         {
         "name": "张三3",
         "age": "18",
         "sex": "男",
         "hobby":[
         {"name":"篮球"},
         {"name":"乒乓球"}
         ]
         },
         
         {
         "name": "张三4",
         "age": "18",
         "sex": "男",
         "hobby":[
         {"name":"篮球"},
         {"name":"乒乓球"}
         ]
         },
];
$("#btn").on("click", cla, function (e) {
	console.log("你点击我");
	//事件执行之后怎样获取data
	//执行事件传递的数据在e(事件的执行对象)  data属性
	console.log(e.data);
	//json集合获取单个值
	for (var i = 0; i < e.data.length; i++) {
		console.log(e.data[i].name, e.data[i].age, e.data[i].sex, e.data[i].hobby);
	}
});

事件on off注意细则

//on同时绑定多个事件  中间用空格隔开
$("#btn").on("click mouseenter mouseleave", handle);
function handle(e){
	同一个函数里面如何区分事件  借助事件的参数e event
	if (e.type == "click") {
	console.log("单击");
	//单击的时候移除鼠标进入事件
	//在事件里面找当前的执行对象  $(this)
	console.log($(this));
    //off 写一个参数  可以移除指定的事件
    //fn  不是回调函数    之前在添加事件的时候将之前的匿名回调转化为基本函数写法  在到off中写移除的函数名称
    //添加fn 时候和js里面removeeventlisten  参数是一致的   这个参数可写可不写
     $(this).off("mouseenter", handle);
      }
      
      else if (e.type == "mouseenter") {
      	console.log("鼠标进入");
       }
       
       else {
       	console.log("鼠标离开");
       }
	off事件的移除 不写任何参数该元素的所有事件全被移除
	$("#btn").off();
}

事件bind unbind

var stu = {"name": "maodou", "age": "18"};
$("#btn").bind("click mouseout", stu, handleinfo);
	function handleinfo(e) {
	//获取传递的数据
	console.log(e.data);
	//在同一个函数内部区分事件类型 和上面一致
	if (e.type == "click") {
		console.log("单击事件");
		//在单击的时候把鼠标离开事件移除
		$(this).unbind("mouseout", handleinfo);
	}
	else {
		console.log("鼠标离开");
	}
}

unbind不写参数  全部移除
$("#btn").unbind();

委托事件
父元素将自身的事件委托给子元素来执行
on off中的参数sel (选择器)
selector 是一个选择器字符 $(".box") 直接写 “.box”

$("ul").on("click", ".box", handlelist);
function handlelist() {
	console.log("ul的单击事件委托给第二个li来执行");
	//点击完成之后移除当前的事件委托
	console.log($(this)); //当事件委托之后  事件内部的$(this)  指针发生变化
	//$("ul").off("click");//·这样写可以移除
	//$("ul").off("click",".box");//也是可以移除的
	$("ul").off("click", ".box", handlelist);

二、事件处理
一次性事件

 //one(type,[data],fn)
var str={"name":"张三"};
var str='abc';  //字符串传递不过去
var str=10;
var str=true;
var str=[1,2,3];
//绑定一次性事件
$("#btn").one("click",str,function (e){
	console.log(e.data);
	console.log("点击事件");
});

触发指定类型事件

//trigger(type,[data]) 
$("input").trigger("focus");

var data = [1, 2, 3];
//触发两次  一次是trigger自动触发   自动选择的时候又触发了select事件
$("input").on("select", function (e, res) {
	console.log(res);
	/*第一次是trigger触发的select 传递的数据res  存在的
	第二次触发  是在文字被选择的时候常规触发的这个事件  所以res  undefined*/
	//设置文本css
	$(this).css("color", "red");
});
	$("input").trigger("select", [data]);//默认触发选择事件
	//自动触发click  输出是一次

自定义的事件

$("input").on("userclick",function (){
	$(this).css({
	border:"1px solid red"
	});
}).trigger("userclick");

事件的切换

//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("鼠标离开");
});

封装事件的方法

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
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])

$(".block").click(100,function (e){
	console.log("单击", e.data);
}).mousedown(function (){
	console.log("鼠标按下");
}).mouseenter(function (){
	console.log("鼠标进入");
}).mouseleave(function (){
	console.log("鼠标离开");
});

浏览器窗口变化事件

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

事件的执行参数

$(function (){
	//e   event
	$("button").click(function (e){
	console.log(e);
	//事件对象
	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 是  鼠标
});
        $("ul").on("click",".box",function (e){
            //$(this)  指向子元素
            console.log(e.delegateTarget);
        });

        $(window).mousedown(function (e){
            console.log(e.which);  //输出ascii值
        });
    });

事件冒泡和处理

$(function (){
	$("div").click(function (e){
		console.log(1);
		//处理事件的冒泡  用事件参数
		//e.stopPropagation(); //处理事件冒泡
		console.log(e.isPropagationStopped());
		return false; //处理事件冒泡
     });
});