jQuery
事件
1. 事件注册
1.1 普通事件注册
.bind() --- 重点
2.1.2 事件委派(事件委托)
.on() --- 重点
.delegate() --- 了解
窗口加载事件
-
原生：
window.onload = function(){}// DOM加载事件 window.onload = function(){ //原生获取 var box = document.querySelector("#box"); //console.log(box); }作用： 等待页面中所有的资源加载完毕后执行的代码
所有资源： 图片 css样式 htmlDom 视频...
缺点：同一事件只能注册一次，如果重复注册多次，那么后面的将会覆盖之前的 jQuery中DOM加载事件
语法：
$(document).ready(function(){})
})
方式一：
$(document).ready(function(){
//jq获取
var box2 = $("#box");
console.log(box2.html());
console.log(box2.attr("title"));
});
方式二（常见书写方式）:
$(function(){
//jq获取
var box2 = $("#box");
console.log(box2.html());
console.log(box2.attr("title"));
});
- 作用：当html DOM资源加载完毕后执行的代码
简写：
$().ready(function(){})
$(function(){}) --- 推荐使用
注意：
jQuery的DOM加载事件，可以注册多次，从加载速度上比较，jQuery的DOM加载事件相比原生的窗口加载事件要快一些，由于需要加载的资源少一些，并且有简写形式，原生只有一种书写方式
- jq窗口加载事件(补充)
$(window).load(function(){});
1.普通事件注册
- 语法： jq对象.
bind("不带on事件类型",事件处理函数) - 案例：
$("div").bind("click",function(){
alert(12);
});
- 简写： jq对象.事件类型(事件处理函数)
2.一个事件注册一个事件处理函数
$("div").bind("click",function(){
alert(12);
});
3.一个事件注册多个事件处理函数
链式DOM操作----jQuery的特点，内部函数功能代码之后会返回对象
$("div").click(function () {
alert(3);
}).click(function () {
alert(4);
});
4.两个事件类型同时注册一个事件处理函数
//需求： 移入div框，如果当前含有类名test,就删除,否则就添加
//需求： 移出div框，如果当前含有类名test,就删除,否则就添加
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("test");
});
5.多个事件类型对应不同的事件处理函数
$("div").click(function(){
alert(1)
}).mouseover(function () {
$(this).css("background" ,"deepskyblue")
}).mouseout(function () {
$(this).css("background" ,"red")
})
链式DOM操作是jQuery的一种特点。
理解 jQuery中可以实现链式DOM操作的原因，由于this关键字问题 （jQuery中让this永远指向调用者）
;(function ($) {
var _that;
// 实现插件功能函数
function _插件名 () {
// 保留this
_that = this;
// 插件功能代码
// 返回this 方便链式调用
return _that;
}
// 挂在jQuery的原型上
$.fn.插件名 = _插件名；
})(jQuery)
6. 普通事件注册出现的bug
问题： 对于未来新增的元素不存在事件行为
2.事件委派
- 事件委派原理
1.1 子元素的事件冒泡到父元素 委托给父元素绑定事件
- 把注册的事件委托给父辈元素，然后再由父辈元素派发给子级元素
- 注意： 父辈元素一定是存在的元素
1.2 事件委派可以解决的问题
- 事件重复绑定问题
- 动态元素无法直接绑定事件问题
- 事件委派
2.1 语法
jq对象(父辈元素).delegate(子级元素,事件类型,事件处理函数);
注意： 早期使用比较多，现在不怎么使用
//需求：点击button按钮，在box框中追加新的段落元素
$("button").click(function () {
//对于未来新增的元素不存在事件行为
$("<p>这是新增元素</p>").appendTo("#box");
});
//需求：给box框中所有段落注册点击事件
$("#box").delegate("p","click" ,function(){
alert(2);
})
2.2语法 -- 推荐使用
jq对象(父辈元素).on(事件类型,子级元素，事件处理函数)
现在都用on给绑定事件
$("#box").on("click" ,"p",function(){
alert(2);
})
1. 事件注销 -- 了解
- 普通事件注销：
语法： jq对象.unbind()
案例：
$("div").unbind();//注销所有事件
$("div").unbind("click");//注销所有指定类型的事件
$("div").unbind("click",a);//注销所有指定类型的指定处理函数事件
-
事件委派注销：
语法： jq对象.off()
案例：
$("div").off();//注销所有事件
$("div").off("click");//注销所有指定类型的事件
$("div").off("click",a);//注销所有指定类型的指定处理函数事件
值得注意的是 ：
注销指定类型的指定事件处理函数事件，要使用该函数的名称，才是指代同一个函数，函数为引用数据类型，存放在堆中，要使用引用地址才指代同一个，如果形式一样，也不是指代同一个函数，而只是长相一样的不同的两个函数
注销指定事件处理函数，函数要抽出去
1. 合成事件
语法：
jq对象.hover(function(){
//相当于mouseenter mouseover
},function(){
//相当于mouseleave mouseout
});
mouseover和mouseenter的区别：
- 不论鼠标指针穿过被选元素或其子元素，都会触发
mouseover事件 - 只有在鼠标指针穿过被选元素时，才会触发
mouseenter事件
1. 事件对象
语法： 作为事件处理函数的参数传入
案例： jq对象.事件类型(事件处理函数(
event){})属性：
event.pageX: 离窗口的水平坐标
event.pageY: 离窗口的垂直坐标方法：
event.stopPropagation(): 阻止事件传播
event.preventDefault(): 阻止浏览器的默认行为
// 需求 点击页面，判断点击的是哪个键
$(function() {
$(document).mousedown(function(event) {
//1：鼠标左键；2：鼠标中建；3：鼠标右键
alert(event.which);
});
});
1. 表单事件
1.1
onsubmit： 点击提交按钮(submit)在数据提交之前触发的事件
$("form").sumit(function(){})1.2
onfocus：获取焦点事件
作用： 获取焦点时，清空value属性值
现在通常用css3的placeholder占位符1.3
onblur： 失去焦点事件
作用： 验证写入的数据是否合法
1. 客户端验证：验证写入的数据是否合法(符合一定规则)
2. 服务器端验证：验证用户名是否能够注册(是否在数据库中存在)1.4
onchange：表单内容改变触发的事件
通常用于： 单选框 多选框 下拉框
jQuery自定义事件类型
1.自定义事件
什么叫自定义事件
在jQuery内部没有的事件类型 可以通过trigger()自己自定义
2.实现自定义事件的步骤（三步）
- 找到最接近的原生事件
- 触发原生事件， 在事件里面判断 ，在特定情况 使用
jQuery的触发器trigger() 自定义一个事件类型（触发 注册一个自定义事件类型） - 绑定使用自定义事件
<button id="btn">点我 用右键</button>
<script>
// a) 找到最接近的原生事件
$('#btn').on('mousedown', function (e) {
// b) 触发原生事件 在事件里面判断 如果 e.which === 3 就是点击右键
if (e.which === 3) {
// c) 在特定情况 使用jQuery的触发器 trigger()
//自定义一个事件类型（触发 注册一个自定义事件类型）
$(this).trigger('rightClick')
} else if (e.which === 2) {
$(this).trigger('centerClick')
}
})
// d) 绑定使用自定义事件
$('#btn').on('rightClick', function () {
alert('我是自定义的右击事件！')
})
$('#btn').on('centerClick', function () {
alert('我是自定义滚轮点击事件！')
})
</script>
