JQuery事件详解

最新推荐文章于 2021-10-22 17:36:59 发布

星灭233

最新推荐文章于 2021-10-22 17:36:59 发布

阅读量158

点赞数

分类专栏： jQuery 文章标签： js javascript jquery

本文链接：https://blog.csdn.net/ksx2333/article/details/115384057

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言

1 事件的绑定与解绑

1.1 事件绑定(2种)

      * eventName(function(){})
         绑定对应事件的监听 例如 $("#div").click(function(){})
      * on(eventName,function(){})
         通用的绑定事件监听 例如 $("#dv").on("click",function(){})
      * 优缺点
        eventName: 编码方便 但是只能添加一个监听 并且有的事件监听不支持
        on:编码不方便 可以添加多个监听 且更通用

1.2 事件解绑

      * off(eventName)

   //1 给.out绑定点击监听(用两种写法) 
   $(".out").click(function(){})
   $(".out").on("click",function(){})
   //2 给.inner绑定鼠标移入和移出事件监听(用3种方法绑定)
   //第一种 onmouseover onmouseout
   //第二种 onmouseenter onmouseleave
   //第三种 通过jquery中有一个hover

2 js中的事件

鼠标事件

onclick 点击事件
ondblclick 双击事件
onmouseover 鼠标移动覆盖事件
onmouseout 鼠标移出事件
onmousemove 鼠标移动事件
onblur 表单模糊事件
onfocus 表单焦点事件
（后二者多用于表单/通常用于 input, select, 和a.）

<div id="outer"></div>
<input type="text" onblur="mm()" id="dd"><!--或者这里换为onfocus(前者离开表单后者进入表单产生变化) -->
<script src="js/jquery-1.10.1.js"></script>
<script>
    $("#outer").on("click", function () {
        console.log("点击事件")
    })
    $("#outer").on("dblclick", function () {
        console.log("双击事件")
    })
    //2 鼠标移动事件
    $("#outer").on("mouseover", function (e) {
        console.log(e.clientX + "," + e.clientY)//获取移入的位置
    })
    $("#outer").on("mouseout", function (e) {
        console.log(e.clientX + "," + e.clientY)
    })
    $("#outer").on("mousemove",function(e){
        console.log(e.clientX + ","+e.clientY)
    })
    //3 表单事件(只作用于表单)
    $("#dd").on("blur", function (e) {
        console.log("移出表单")
    })
    $("#dd").on("focus", function (e) {
        console.log("移入表单")
    })
    </script>
<!--或者这里换为(onblur离开表单onfocus进入表单产生变化) -->
    <script>
        //3 表单事件
        function mm() {
            var dd = document.getElementById("dd");
            // $("#dd").css({
            //     background: 'red',
            // })
            dd.style.background = 'red';
        }
    </script>

3 mouseover与mouseseenter的区别

mouseover: 在移入子元素也会触发,对应mouseout 会触发冒泡。
mouseenter: 只有移入当前元素才会触发,对应的mouseleave 只会触发一次不会产生冒泡。

hover() 使用的就是mouseenter()和mouseleaver()结合

<!--针对的是类名为div1的元素（小白应该较难理解，毕竟我没写body哈哈哈）-->
<script src="js/jquery-1.10.1.js"></script>
<script>
    //有冒泡特性
    $(".div1").mouseover(function(){
        console.log("mouseover移入")
    }).mouseout(function(){
        console.log("mouseout移出")
    })
    //没有冒泡特性
    $(".div1").mouseenter(function(){
        console.log("mouseenter移入")
    }).mouseleave(function(){
        console.log("mouseleave移出")
    })
    jquery给我们提供了这样一个api
    $(".div1").hover(function(){
        console.log("移入")
    },function(){
        console.log("移出")
    })
</script>

4 事件委托的引入

事件委托：
绑定事件会出出现这样一个问题新加的元素没有监听

<body>  
    <ul>
        <li>111</li>
        <li>2222</li>
    </ul>
    <button id="btn">添加新的li</button>
</body>
<script src="js/jquery-1.10.1.js"></script>
<script> 
    //1 点击li改变当前li的背景颜色
    $("ul>li").click(function(){
        this.style.background="red"
    })
    //2 点击btn1 就添加一个li
    $("#btn").click(function(){
        $("ul").append("<li>xxxxxxxxx</li>")
    })
</script>

5 事件委托详解

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

5.1 事件委托

   将多个子元素(li)的事件监听委托给父辈元素(li)处理
   监听的回调是加在子元素的父辈上的
   当操作任何一个子元素(li)的 事件会冒泡父辈元素(ul)
   父辈元素不回直接处理事件 而是根据event.target得到发生事件的子元素(li),通过这个子元素代用事件的回调函数

5.2 事件的委托双方

    委托方  业主 li
    被委托方 中介 ul

5.3 使用事件委托的好处

5.3.1 减少内存消耗

减少事件监听的数量 n==>1 ;
添加新的子元素自动会有事件响应处理

5.3.2 动态绑定事件

事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的

5.4 Jquery事件委托的Api

   设置事件委托
    $(parentSeclector).delegate(childrenSelector,eventName,callback)
   移出事件委托
    $(parentSeclector).undelegate(eventName)

<script src="js/jquery-1.10.1.js"></script>
<script>
    //事件委托 给父元素绑定delegate 第一个参数 需要代理的子元素 第二个参数 事件名称 第三个参数 回调函数
    $("ul").delegate("li","click",function(){
        this.style.background="pink"
    })
    $("#btn").click(function(){
        $("ul").append("<li>我是新增的元素</li>")
    })
    //解除事件委托
    $("#btn2").click(function(){
        $("ul").undelegate()  
    })
</script>