jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务

jQuery笔记合集
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业	jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业	jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务	jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务	jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业

一、给未来的元素绑事件（官方推荐的方式）-on

1. 像bind那样使用，但是不能给未来的元素绑定

   $(元素).bind("click",function(){});
   //on
   $(元素).on("click",function(){});
   //比如
   $("div").on("click",function(){});
   

2. 事件委托（用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(){
       
   });
   

2. 被卷去的高度和宽度

   1. 高度
   //JS
   元素.scrollTop;
   //JQ:
   $(元素).scrollTop();
   2. 宽度
   元素.scrollLeft;
   //JQ:
   $(元素).scrollLeft();
   

3. 页面的总宽和总高

   1. 总高
   元素.scrollHeight;
   //JQ没有，用JS的来代替
   2. 总宽
   元素.scrollWidth;
   //JQ没有，用JS的来代替
   

四、JQ的盒模型

1. 定位父级

   //一个元素有2个父级，直接父级，一个是定位父级
   JS：
   元素.parentNode;//亲爹
   元素.offsetParent;//干爹，会改，跟着css的postion
   JQ:
   $(元素).parent();//亲爹
   $(元素).offsetParent();//干爹
   

2. 元素的绝对水平距离

   一般我们只需要该元素到浏览器最左侧和最顶部的绝对距离
   //JS ，自己写了一个方法：getPos()
   元素.getPos().left;
   //JQ不需要自己造轮子，直接调用它给我们封装好的方法，直接用即可
   $("元素").offset().left;
   

3. 元素的绝对垂直距离

   $("元素").offset().top;
   

相关单词

1. on 在什么的上面
2. in 在。。。的里面

资料、作业、笔记下载链接： https://www.imqd.cn/jquery-dom.html