jQuery事件

使用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>```