jQuery 知识点 (五) —— jQuery 事件

1、jQuery 元素相关的事件和方法

var $div = $("<div></div>");
$div.ready(function(){
    console.log("DOM 加载完成时执行！");
});
var events = "click change blur";
/**
* $(selector).on(events,[child],[data])
* @param events 用空格符分隔的多个事件类型
* @param [child] 过滤事件传递到子元素
* @param [data] 传递给函数的数据
*/
$div.on(events,".red",data,function(){
    console.log("执行 on 绑定事件" + events);
});
$div.on("click",function(){
    console.log("执行 click 事件");
});
$div.on("click",{name:"Tom",age:15},function(){
    console.log("执行传入了数据的 click 事件，参数附加给力 event.data 对象");
    console.log("姓名 ："+event.data.name);
    console.log("年龄 ："+event.data.age);
})
var jQueryApp = {
    clickHandler:function(event){
        console.log("执行函数 clickHandler");
        console.log("查看事件传入的数据：");
        console.log(event.data);
    },
    otherClickHandler:function(event,arg1,arg2){
        console.log("执行带参数 arg1,arg2 的函数");
        console.log("触发 click 事件的写法需要改变才能传入 arg1 和 arg2 :");
        console.log("arg1 :");
        console.log(arg1);
        console.log("arg2 :");
        console.log(arg2);
    }
}
$div.off(events);//移除绑定的事件类型
$div.bind("click",function(){
    console.log("执行 bind 方法绑定的 click 事件处理函数");
}); 
$div.bind("click dbclick",function()){
    console.log("执行 bind 方法绑定的 click 和 dbclick 的事件处理函数");
    console.log("当前要么是单击事件要么是双击事件！");
});
$div.bind({
    click:function(){
        console.log("bind 方法的绑定事件的另一种写法");
    },
    mouseout:function(){
        console.log("这是 bind 方法同时绑定多个事件类型和处理函数的写法");
    },
    eat:function(){
        console.log("bind 方法绑定的事件不限于浏览器默认事件，可以是自定义的事件！");
    }
});
$(".one").one("click",function(){
    console.log("匹配 .one 选择器的元素只会执行一次 click 事件当前的处理程序，以后不再执行！");
});
$div.trigger("click",{ msg:"传递给 click 事件的数据" });// 在每一个匹配的元素上触发某类事件，可以是 bind 绑定的自定义事件而不限于浏览器事件
$("a").triggerHandler("click",{ msg:"triggerHandler方法触发事件时，浏览器的默认动作不会触发也不会产生事件冒泡" });//a 标签的超链接不会跳转
$div.unbind("click");// 解除每一个匹配元素绑定的 click 事件
$div.unbind();// 解除每一个匹配元素的绑定事件
$div.bind("click",jQueryApp.clickHandler);
$div.bind("click",jQueryApp.otherClickHandler);
$div.nnbind("mouseout",jQueryApp.clickHandler);// 明确解除每一个匹配元素的事件的某个处理函数
$(".clickme").live("click",{msg:"一样可以传数据给 event 的data对象 "},function(){
    console.log("除了当前匹配元素绑定了事件处理函数，以后符合的匹配元素该事件处理函数也对其有效！");
});
$(".clickme").die("click",jQueryApp.clickHandler);// 删除 .live() 绑定的所有事件
/**
* $.delegate(selector[,type][,data][,fn]) : 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
* @param selector 用于过滤触发事件的元素
* @param type 事件类型
* @param data 传递给函数的额外数据
* @param fn 事件处理函数
*/
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
$("p").undelegate();// 删除由 delegate() 方法添加的事件处理函数
$("p").hover({
    function(){
        console.log("鼠标移到元素上触发的函数");
    },
    function(){
        console.log("鼠标移出元素要触发的函数");
    }
});//鼠标悬停事件处理函数，相当于 mouseenter mouseleave 两个事件的叠加
/**
* $(selector).toggle([speed][,easing],fn1,fn2...) : 绑定两个或多个事件处理函数轮流处理事件
* @param speed 隐藏或显示效果速度，默认0毫秒，可以是 "slow"，"normal"，"fast"
* @param easing 切换效果，默认 "swing"，可以是 "linear"
*/
jQueryApp.toggleOne = function(){
    console.log("toggle 第一个处理函数");
}
jQueryApp.toggleTwo = function(){
    console.log("toggle 第二个处理函数");
}
$("div").toggle("slow",jQueryApp.toggleOne,jQueryApp.toggleTwo);//用于绑定两个事件处理器函数，以响应被选元素的轮流的 click 事件
$(".input").blur(function(){
    console.log("元素失去焦点时触发 blur 事件");
});
$("select .input").change(function(){
    console.log("元素的值改变时触发 change 事件");
});
$("div").dbclick(function(){
    console.log("元素的被双击时触发 dbclick 事件");
});
$(window).error(function(msg,url,line){
    console.log("当元素遇到错误时触发 error 事件，");
    jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
$("div").focus(function(){
    console.log("元素获得焦点时触发 focus 事件");
});
$("div").focusin(function(){
    console.log("当元获得焦点时触发 focusin 事件");
});
$("div").focusout(function(){
    console.log("当元素失去焦点时触发 focusout 事件");
});
$("div").keydown(function(){
    console.log("当键盘或按钮被按下时触发 keydown 事件，元素需要获得焦点");
});
$("div").keypress(function(){
    console.log("当键盘或按钮被按下时触发 keypress 事件，且每插入一个字符触发一次");
});
$(document).keyup(function(){
    console.log("当键盘按钮被松开时触发 keyup 事件");
});
$("div").mousedown(function(){
    console.log("当鼠标指针移动到元素上方，并按下鼠标按键时触发 mousedown 事件");
});
$("div").mouseenter(function(){
    console.log("当鼠标指针穿过元素时触发 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用");
});
$("div").mouseleave(function(){
    console.log("当鼠标指针离开元素时触发 mouseleave 事件");
});
$("div").mousemove(function(){
    console.log("当鼠标指针在指定的元素中移动时触发 mousemove 事件");
});
$("div").mouseout(function(){
    console.log("当鼠标指针从元素上移开时触发 mouseout 事件");
});
$("div").mouseup(function(){
    console.log("当在元素上放松鼠标按钮时触发 mouseup 事件");
});
$(window).resize(function(){
    console.log("当调整浏览器窗口的大小时");
});
$(window).scroll(function(){
    console.log("当用户滚动指定的元素时,会发送 scroll 事件");
});
$("form").submit(function(){
    console.log("表单函数提交时执行，只适用于表单元素");
});
$("textarea,input[type=text]").select(function(){
    console.log("文本域或input元素文本被选中时触发 select 事件");
});
$(window).unload({name:"Peter"},function(){
    console.log("当用户离开页面时触发 unload 事件");
    return confirm(e.name + ",are you ready to go?");
});

2、jQuery 元素相关的事件对象 event

$("p").click({name:"张三"},function(e){
    console.log(e.currentTarget === true);//event.currentTarget 指向在事件冒泡阶段中的当前 DOM 元素
    console.log(e.data);// event.data 指向传递给执行程序的数据
    console.log(e.delegateTarget);// 委托处理程序 delegate 和 on 本质上是将事件处理程序附加到正在处理的元素的祖先上，对于非 delegate,on 的事件处理函数，e.delegateTarget 总是等价于 e.currentTarget
    console.log(e.isDefautPrevented());//根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
    e.preventDefault();//阻止浏览器默认行为
    console.log(e.IsImmediatePropagationStopped());//根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值
    e.stopImmediatePropagation();// 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
    console.log(e.isStopPropagationStopped());// 根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值
    e.stopPropagation();// 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数，但当前元素的其他事件继续
    console.log("当事件被触发时此属性包含指定的命名空间");
    console.log("pageX：" + event.pageX);//鼠标相对于文档左边缘的位置
    console.log("pageY：" + event.pageY);//鼠标相对于文档顶部边缘的位置
    console.log(event.relateTarget);// 在事件中涉及到的其他 DOM 元素，例如在 mouseout 中指向被进入的元素
    console.log(event.result);//当前事件事件最后触发的那个处理函数的返回值 或 undefined
    console.log(event.timeStamp);//返回事件触发时距离1970年1月1日的毫秒数
    console.log(event.type);// 返回事件类型
    console.log(event.witch);// 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
    console.log(String.fromCharCode(e.charCode));// 鼠标按下的键码，已过时，请使用 e.key
});