使用jQ绑定事件
bind()方法和unbind() 在3.0的时候已被移除，尽量减少使用。或者不用。
通过DOM添加事件不会被覆盖：
通过DOM的addEventListener添加事件可以多次添加，不会被覆盖
var div = document.getElementById('div');
div.addEventListener('click',function(){
alert('一次')
});
div.addEventListener('click',function(){
alert('二次')
});
绑定与移除事件：
on()绑定事件；off()移除事件：one()绑定方法只能触发一次；on绑定的事件不受one的影响；
添加事件:.on()方法 事件事件函数可以多次触发.
$('div').on('click',function(){
alert('加波关注啊');
});
//事件的移除。
$('div').off('click');
//one();通过one绑定的事件只能触发一次（one绑定的函数只能触发一次）；添加一次性事件
$('button').one('click',function(){
alert('你猜');
});
//on绑定的事件函数不受one事件绑定的影响。
$('button').on('click',function(){
alert('我出来了')
});```
on可以同时绑定多个事件：
在匿名函数中，填写一个参数名，这个参数名就是事件对象event；
// 同时绑定多个事件
$('.div1').on('mouseover dblclick', function (event) { //同时给类名为div1的对象绑定了mouseover和dblclick事件
console.log(event.type);
});```
off()移除事件：
可以同时移除所有的事件，也可以移除指定事件如果是多个，中间用逗号隔开；
// 移除事件
// $('.div1').off(); // 移除所有事件
$('.div1').off('dblclick mouseover'); // off() 函数可以有参数，移除指定事件，如果是多个，中间用空格隔开
复合事件：
.hover（）方法：
*复合事件：。hover()事件
* mouseenter 和 mouseover：over是鼠标滑过标签触发的时间。enter是鼠标移入标签就会触发的时间。
*
* */
$('div').hover(function(){
$(this).css("background","red");
},
function(){
$(this).css("background","blue");
});
*/```
事件的获取（事件对象）：
事件类型：event.type；
```/*
*type:获取当前触发的事件类型。
*/
$('div').mousemove(function(event){
console.log(event.type);
});
例：查看事件的类型；
$('.div1').on('mouseover mouseout', function (event) {
if (event.type == 'mouseover') {
$(this).css('background-color', 'black');
} else {
$(this).css('background-color', 'red');
}
});```
target 与currentTarget：
target：触发事件的元素；currentTarget：响应事件的元素：
/*
*target:当前点击的标签元素 ； 事件的执行。
- currentTarget：是保存的是事件绑定的对象。（相应的事件对象）事件的响应者
- */
$('body').click(function(event){
//console.log(event.target); 当点击的是div、的时候，打印的是div 当前点击的是谁 target就代表谁。
console.log(event.currentTarget); 事件有谁触发 currentTarget就代表谁
});```
事件的坐标:
pageX；pageY；clientX；clientY；offsetX；offsetY；screenX；screenY；
$('body').click(function(event){
console.log(event.pageX);
*pageX， pageY：包括具有滚动条的宽度和高度;(页面);
console.log(event.pageY);
console.log(event.clientX);
*clientX,clientY： 可视区域的宽度和高度;
console.log(event.clientY);
console.log(event.offsetX);
*offsetX，offsetY:不包含margin；（说白了就是margin的问题）;
console.log(event.offsetY);
console.log(event.screenX);
*screenX;screenY:相对于屏幕的左上角点;
console.log(event.screenY);
});
取消默认事件： event.preventDefault（）；
<script type="text/javascript">
//取消标签的默认行为（事件）
//event.preventDefault();阻止默认行为。
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault(); //阻止超链接a
})```
事件冒泡：event.stopPropagation();
<script type="text/javascript">
$(document).ready(function(){
//事件冒泡 从里往外传。
/*触发子标签的某一个事件，js引擎会把这个事件传递到父级标签，一直传递到document，如果在这个传递链中也有这个事件，该事件也会被触发。利用事件冒泡我们可以实现 事件委托及代理
- 阻止事件的冒泡event.stopPropagartion();阻止在传递链中触发事件。
- */
//触发子标签的时候依次触发到父标签
$('#div1').click(function(){
alert("1");
});
$('#div2').click(function(){
alert("2");
});
//阻止事件的冒泡
$('#div3').click(function(event){
alert("3");
event.stopPropagation();
});
});```
模拟事件：trigger；triggerHandle；不通过用户触发事件，自动会触发事件，一般用不到。可以利用定时器去弹。用户的体验会更好。
<script type="text/javascript">
$(document).ready(function(){
/*
*事件模拟：不通过用户触发事件，但事件依然可以触发。
* */
//链式语法：（.）把一组操作用点语法来操作
$('#div').click(function(){
alert("加波关注啊？")
}).click();
//$('#div').trigger('click');
//$('#div').triggerHandler('click');
//trigger,triggerHandler 都可以模拟事件的执行，triggerHandler不会触发标签的默认事件。
//trigger可以执行默认的事件的实行。triggerHandler 不执行默认事件的执行。
$('form').trigger('submit');
$('form').triggerHandler('submit');
});```
命名空间; 给事件添加一个新的名字，使用点（.）分割。这样在移除事件的时候可以通过新添加 的名字进行移除；
$(document).ready(function(){
//命名空间：在事件名后在添加新的名字，用点分割。这样通过后缀名字把相同事件不同方法区分开。方便对事件的管理
$('button').on('click.tel',function(){
alert("加油？")
})
$('button').on('click',function(){
$('button').css('background',"red");
});
//解绑事件时，就可以通过命名空间添加的新名字进行解绑。不影响其他相同的事件
$('button').off('.tel');
})
</script>```
事件委托：本该自身的事件添加在父元素的身上（只能添加在父子元素上。）（利用的是事件冒泡）；
// 使用JQ实现代理设计模式
$('ul').on('click', 'li', function () {
// this == li
$('<li></li>').html(this.innerHTML).appendTo('ul');
console.log（event.target）;
console。log（event.currentTarget）； 指的都是li
});
// 代码是把事件绑定到ul身上的，但是是li委托的，实际触发事件的是li对象，所有函数内部的this是li对象
// ul作为li的代理，帮li做事
// li把事件委托给ul，让ul做事```
自定义事件：
自定义一个事件，并给事件添加一个函数 ，最后使用element.trigger();来调用；
<script type="text/javascript">
//自定义事件只能通过trigger来调用
$('div').on('hhaha',function(){
alert("努力学习吧")
});
$('div').trigger('hhaha');
</script>
窗口事件：
调整窗口大小事件：
<script type="text/javascript">
$(document).ready(function(){
//窗口大小改变时触发的事件
$(window).resize(function(){
console.log("窗口改变时，会打印出来");
});
//窗口滚动事件
$(document).scroll(function(){
console.log("窗口滚动时发生的触发的事件");
});
});
</script>```
