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

一、给未来的元素绑事件（官方推荐的方式）-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 在。。。的里面

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号