一、给未来的元素绑事件（官方推荐的方式）-on
  1. 像bind那样使用，但是不能给未来的元素绑定
$(元素).bind("click",function(){});
//on
$(元素).on("click",function(){});
//比如
$("div").on("click",function(){});
  1. 事件委托（用on来实现）
//含义：即将原本发生在元素身上的事件委托给父级来监听。适用于给未来的元素绑定
   //即不给元素绑定，而是给祖先绑
   <ul>
       <li>123</li>
       <li>123</li>
   </ul>
   //原本要给li标签绑定事件，但是现在不给他绑，而是代理给它父级来绑定
   <script>
       //不用事件委托：
       $("li").on("click",function(){});
       //用了事件委托：
       $('祖先').on("原本要绑定事件的元素","click",function(){});
       //比如：
       $('ul').on("click","li",function(){});
   </script>
二、事件对象

和JS一样。都记录事件发生时的那些细节。行车记录仪。比如你点击了哪个按钮，哪个键盘，当前坐标，是否冒泡等都被记录了。

只需要在事件处理程序（事件函数）写一个参数即可。

1. 
$("div").click(function(e){
    console.log(e);
    //打印，得到该对象的宝库，所有的方法和属性
});
2.
$("div").bind("click",function(e){
    console.log(e);
});
3.
$('ul').on("click","li",function(e){});
  1. 重要的属性
    e.clientX 鼠标点击的x坐标（相对的）（浏览器的可视范围内）
    e.clientY 鼠标点击的y坐标
    e.pageX 鼠标点击的x方向的绝对坐标（包括浏览器被卷去的宽度度）
    e.pageY 鼠标点击的y方向的绝对坐标（包括浏览器被卷去的高度）
    e.keyCode 键码
    e.which 鼠标按键，1 表示左键，2中，3右键
  2. 重要的方法
    e.stopPropagation(); //阻止事件冒泡
    e.preventDefault(); //阻止默认事件
三、滚动条事件
  1. 事件
//任何元素都有滚动条事件，只要该元素有滚动条，就可以给其绑定滚动条事件，从而在滚动滚动条时，触发它
$("body").on("scroll",function(){
    
});
  1. 被卷去的高度和宽度
1. 高度
//JS
元素.scrollTop;
//JQ:
$(元素).scrollTop();
2. 宽度
元素.scrollLeft;
//JQ:
$(元素).scrollLeft();
  1. 页面的总宽和总高
1. 总高
元素.scrollHeight;
//JQ没有，用JS的来代替
2. 总宽
元素.scrollWidth;
//JQ没有，用JS的来代替
四、JQ的盒模型
  1. 定位父级
//一个元素有2个父级，直接父级，一个是定位父级
JS：
元素.parentNode;//亲爹
元素.offsetParent;//干爹，会改，跟着css的postion
JQ:
$(元素).parent();//亲爹
$(元素).offsetParent();//干爹
  1. 元素的绝对水平距离
一般我们只需要该元素到浏览器最左侧和最顶部的绝对距离
//JS ，自己写了一个方法：getPos()
元素.getPos().left;
//JQ不需要自己造轮子，直接调用它给我们封装好的方法，直接用即可
$("元素").offset().left;
  1. 元素的绝对垂直距离
$("元素").offset().top;
相关单词
  1. on 在什么的上面
  2. in 在。。。的里面