a丶事件对象
语法结构：$(selector).事件名称(function(ev){})
1）事件对象的属性
clientX、clientY：鼠标的位置x和y，可视区为基准点
pageX、pageY：鼠标的位置x和y，页面为基准点
ctrlKey、altKey、shiftKey：功能键 true 否则false
ev.which：相当于keyCode,可以记录鼠标的键值,123(左中右)
ev.target：触发该事件的节点
ev.delegateTarget：返回值是Element类型，返回"受事件委托"绑定当前事件处理函数的的DOM元素；如果想要实现受委托的效果，需要利用事件绑定中的on方法来实现
ev.originalEvent：在jquery中，最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理，其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中，每个 event 都是 jQuery.Event 的实例表示的就是原生的事件对象
b丶事件绑定
1）绑定单个事件
$("div").on('click',function(){
alert('hello')
})
//如果是多元素绑定相同事件，可以利用群组选择器
$("div,span").on('click',function(){
alert('hello')
})
2）一次性绑定多个事件
//一次性绑定多个事件
$("div").on('click mouseover',f1);
// //将函数单纯定义
function f1(){
console.log(123)
}
//如果多事件中需要执行多函数，需要在on方法中传入一个对象形式的参数
$("div").on({'click':f1,'mouseover':f2})
function f1(){
console.log(123)
}
function f2(){
console.log(456)
}
4）4、自定义事件
//自定义事件
//可以在页面加载的时候来运行
$("#btn1").on('hello',function(){
console.log(456)
})
$("#btn1").trigger('hello')
//也可以基于某事件来运行
function f2(){
console.log(456)
}
$("#btn1").on('hello',f2)
$("#btn2").click(function(){
$("#btn1").trigger('hello')
})
function f2(){
console.log(456)
}
$("#btn1").on('click',f2)
$("#btn2").click(function(){
$("#btn1").trigger('click');
})
c丶事件委托(on)--on方法的另一种用法
概念：事件委托：将事件添加给父元素，事件发生时，交给对应的子元素处理
//事件委托
$("ul").on('click','li',function(){
//$(this)表示的是li本身，并非ul
$(this).css('background','red');
})
//事件也可以发生在新元素上
$("ul").append("<li>添加的新的li</li>");
d丶d.事件取消(off)
1）基本用法：
语法结构：$(selector).off(事件名称)
//添加绑定事件
$("div").on('click',function(){
console.log('one')
}).on('mouseover',function(){
console.log('two')
})
//单事件取消
$("div").off('click')
2）给单个元素取消多个事件：
语法结构：$(selector,selector...).off(事件名称1 事件名称2)
//解绑多个事件 事件名之间用空格分隔
$("div,p").off('click mouseover');
3）同时给多个元素解绑相同的事件：
语法结构：$(selector,selector...).off(事件名称)
4）给多个标签解绑多个事件
语法结构：$(selector,selector...).off(事件名称1 事件名称2...)
$("div").on({'click':f1,'mouseover':f2})
function f1(){
console.log('one')
}
function f2(){
console.log('two')
}
$("div,p").off({'click':f1,'mouseover':f2});
强调：off()方法如果不添加参数则把操作元素的所有事件删除
e丶一次性事件(one)
语法结构：$(selector).one(type, data, callback)
type(String): 必填，事件类型
注意：其中type类型也可以像on一样传入多个类型，但是不要传入对象形式
data(Object): 可选，作为event.data属性值传递给事件对象的额外数据对象
callback(Function): 必填，绑定到每个匹配元素的事件上面的处理函数
//一次性事件
$("div").one('click',{a:100,b:200},function(ev){
//在做请求的时候的数据是一种固定性数据，并不会时时发生变化
console.log('hello world')
//ev.data额外数据对象
console.log(ev.data.a);
console.log(ev.data.b);
})
作用：
(1) 为每一个匹配元素的特定事件(比如click)绑定一个一次性的事件处理函数。
(2)每个对象上，这个事件处理函数只会被执行一次。
f丶事件的命名空间
概念：事件命名空间类似css的类，我们通过在事件类型的后面点+名称的方式来给事件添加命名空间，相当于给事件名称起别名，方便来引入事件
语法结构：$(selector).on(事件名.名称,function(){})
$(“div”).on("click.a",function(){});
$(“div”).on("click.a.bb",function(){});
取消绑定：
//可以利用别名来进行区别
$("div").off('mouseover') -- 意味着只去掉掉默认的事件mouseover
$("div").off('.a') -- 意味着无区分事件类型，只找.a的别名，只要有则都被取消
$("div").off('mouseover.a') --意味着只取消掉mouseover别名为a的事件
$("div").off('mouseover.a.bb') -- 意味着取消mouseover的别名为bb的
$("div").off('.bb') -- 意味着无区分事件类型，只找.bb的别名
g丶事件的默认行为以及冒泡的阻止
冒泡:ev.stopPropagation()/return false
默认行为: ev.preventDefault()/return false;
总结：return false既有阻止行为又有阻止冒泡
function f2(ev){
console.log('childs-dom');
//阻止冒泡
return false;
//利用事件对象
ev.stopPropagation();
}
