jQuery 自学笔记（六）——— on统一注册事件、事件解绑、事件触发、事件对象、链式编程、显示与隐式迭代

迈不过友情╰ 2023-10-11 16:55 3阅读 0赞

#### 文章目录 ####

*   *  一、on 统一所有的注册事件
     *   *  1.1 on 简单注册
         *  1.2 on 委托注册
     *  二、事件解绑
     *  三、触发事件 trigger
     *  四、事件对象
     *  五、链式编程
     *  六、显示迭代与隐式迭代

--------------------

### 一、on 统一所有的注册事件 ###

jQuery1.7之后，jQuery用on统一了所有事件的注册方式。

#### 1.1 on 简单注册 ####

不支持动态注册

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
          
                width: 200px;
                height: 200px;
                margin-top: 10px;
            }
            .one  {
          
                border: 1px solid red;
            }
            .two {
          
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
    <input type="button" value="按钮" id="btn"/> <br/><br/>
    <div class="one" id="one"></div>
    </body>
    </html>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
          
            $('#btn').click(function () {
          
                let $divNew = $('<div class="two"></div>');
                $('body').append($divNew);
            });
            //on简单注册事件.
            $('div').on('click', function () {
          
    			alert("我是单击事件...");
            });
        })
    </script>

效果如下：  
![在这里插入图片描述][4842cf9a76ed492a961447d1312446e9.gif_pic_left]  
**效果显示，用 on 进行简单的事件注册，原给 div 的注册点击事件，在新创建的 div 中该事件不起作用，即不支持动态注册。**

on 的简单注册，可实现同时注册，代码如下：

$('#one').on({
        
    	'click':function () {
        
    		console.log('单击事件');
    	},
    	'mouseenter':function () {
        
    		console.log('鼠标移入事件');
    	}
    })

效果如下：  
![在这里插入图片描述][71b8b4de2f954ce3a19a9bbf0b17c3fe.gif]

--------------------

#### 1.2 on 委托注册 ####

支持动态注册  
**语法：** `$(父元素选择器).on(事件名称, 选择器, 函数)`

*  第一个参数：事件名称，绑定事件的名称可以是由 空格分开的多个事件（标准事件或者自定义事件）
 *  第二个参数：选择器，执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
 *  （忽略）第三个参数: data，传递给处理函数的数据，事件触发的时候通过event.data来使用，不常使用。
 *  第四个参数：事件处理函数

示例 1：

$('body').on('click','div', function () {
        
    	alert("单击事件.");
    });

效果如下：  
![在这里插入图片描述][f3968cedce084c6bb373eea365f8f487.gif_pic_left]  
从效果可以看出，通过 on 委托注册，可以动态注册。  
委托事件的原理：点击选择器会触发所有父元素的点击事件，即“委托”父元素注册事件。

示例 2：

$('body').on('click','div,span', function () {
        
    	alert("单击事件.");
    });

效果如下：  
![在这里插入图片描述][b8aff36b681443c19b14121d2968cecc.gif_pic_left]

示例 3：同时注册

$('body').on('click mouseenter','div', function () {
        
    	console.log("事件");
    });

效果如下：  
![在这里插入图片描述][43d05bce27ea4447b7cfb0a8e4921856.gif]

--------------------

### 二、事件解绑 ###

jQuery 用 on 来注册事件，用 off 来解绑事件。

1.  off() 不给参数就是解绑所有的事件
2.  off(‘click’) 解绑指定的事件
    
        $('#btn2').on('click',function () {
              
        	$('#one').off(); //解绑所有的事件
        	$('#one').off('click'); //解绑单机事件
        })

--------------------

### 三、触发事件 trigger ###

1.  代码的方式来触发
    
        // div 注册一个单击事件
        $('#one').on('click',function () {
              
        	console.log('单击事件');
        })
        
        //给按钮注册事件
        var i = 0;
        $('#btn1').on('click',function () {
              
        	i++;
        	if(i==3){
              
        		//条件满足，触发div的单击事件
        		//事件触发，感觉使用代码的方式来触发事件
        		// $('#one').click(); //第一种方式
        		$('#one').trigger('click'); //第二种方式
        	}
        });
2.  可以触发自定义事件
    
        //给 div 注册一个自定义事件
        $('#one').on('zidingyi',function() {
              
        	console.log('我是自定义事件');
        })
        
        //定义触发事件
        $('#btn2').on('click',function () {
              
        	var res = confirm('调用自定义事件么？');
        	if(res){
              
        		//触发自定义事件
        		$('#one').trigger('zidingyi');
        	}
        })

--------------------

### 四、事件对象 ###

1.  **什么是事件对象**  
    注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息，比如：触发事件的时候有没有按住某个键，再比如触发这个事件的时候的一些坐标信息等。  
    `jQuery中用事件参数e来获取`  
    `jQuery的事件对象是对原生 js 事件对象的一个封装，已经处理好了兼容性。`  
    `$("#one").on('click', function (e) {console.log(e);});`
2.  **事件对象有常用的三个坐标**  
    `(screenX, screenY)、(clientX, clientY)、(pageX, pageY)`
    
        console.log("screenX: "+e.screenX+":"+e.screenY);//触发事件那一点距离屏幕最左上角的值
        console.log("clientX: "+e.clientX+":"+e.clientY);//触发事件那一点距离可视区左上角的值
        console.log("pageX: "+e.pageX+":"+e.pageY);//触发事件那一点距离页面左上角的值
3.  **阻止事件冒泡**  
    事件冒泡的意思是，当初发当前元素的事件时，会连带着触发父元素（父辈的元素）的单击事件。如：
    
        ...
        <body>
          <div id="one" class="one">
            <input type="button" value="我是按钮" id="btn"/>
          </div>
        </body>
        <script>
          $(function () {
                
            $("#one").on('click', function (e) {
                
              alert('我是div的单击事件');
            })
            //给按钮注册一个单击事件a
            $('#btn').on('click',function (e) {
                
              alert('我是按钮的单击事件');
            })
          });
        </script>
    
    效果图如下：  
    ![在这里插入图片描述][cc9f581316144de1989e14f882c39c83.gif]
    
    结果显示，当触发按钮的单击事件时，按钮的父元素 div 的单击事件也会触发。当按钮的单击事件的函数加上 `e.stopPropagation();`，则会阻止事件冒泡。代码如下：
    
        $('#btn').on('click',function (e) {
              
        	alert('我是按钮的单击事件');
        	e.stopPropagation();//阻止事件冒泡
        })
    
    ![在这里插入图片描述][391731e897a3422abea02eb5d9acbc99.gif]
4.  **阻止默认行为**  
    a 超链接标签的跳转是默认行为，通过事件对象可阻止默认行为。
    
        $('a').on('click',function (e) {
              
          alert('我是a标签的单击事件');
          //第一种方式
          e.stopPropagation();//阻止事件冒泡
          e.preventDefault();//阻止默认行为-阻止a标签的跳转
          //第二种方式
          //return false;//即能阻止事件冒泡又能阻止默认行为
        })
    
    ![在这里插入图片描述][2940e3f2fcb14a2c8ef9bf8f61490484.gif]
5.  **给页面注册键盘按下事件**
    
        $(document).on('keydown',function (e) {
              
        	//e.keyCode能获取按的那个键
        	console.log(e.keyCode);//返回 ascall 值
        })

--------------------

### 五、链式编程 ###

1.  什么时候可以链式编程？  
    **如果给元素调用一个方法，这个方法有返回值，并且返回的是一个 jQuery 对象，那就可以继续再点出 jQuery 方法**，如：  
    `$('div').width(100).height(100).css('backgroundColor','red');`
2.  必须是 jQuery 对象才能点出 jQuery 方法  
    `console.log($('div').width(100).width()); //100`  
    `$('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法`
3.  end() 返回上一状态（选择器）  
    `$('#one').width(200).children().end().height(200) 等同于 $('#one').width(200).height(200)`  
    注意：end() 方法也是 jQuery 方法，其也需要一个 jQuery 对象才能点出。如：  
    // width() 方法返回的是一个数值，数值不能点出end()方法。  
    `$('div').width(100).width().end().height(100); //报错`

--------------------

### 六、显示迭代与隐式迭代 ###

给每一个对象设置 不同的值的时候（或不同处理） 使用显示迭代。  
作用：遍历 jQuery 对象集合，为每个匹配的元素执行不同函数。

`$(选择器).each(function(索引，当前元素))`

注意：返回 false 可用于及早停止循环。

$('#list').each(function (index,element) {
        
    	console.log(index); //每一个li标签的索引
    	console.log(element);//每一个li标签,是一个dom对象.
    });

给每一个对象设置 相同的值的时候（或相同处理） 使用隐式迭代。  
`如：$('li').css('border', '1px solid red')`

[4842cf9a76ed492a961447d1312446e9.gif_pic_left]: https://img-blog.csdnimg.cn/4842cf9a76ed492a961447d1312446e9.gif?#pic_left
[71b8b4de2f954ce3a19a9bbf0b17c3fe.gif]: https://img-blog.csdnimg.cn/71b8b4de2f954ce3a19a9bbf0b17c3fe.gif
[f3968cedce084c6bb373eea365f8f487.gif_pic_left]: https://img-blog.csdnimg.cn/f3968cedce084c6bb373eea365f8f487.gif?#pic_left
[b8aff36b681443c19b14121d2968cecc.gif_pic_left]: https://img-blog.csdnimg.cn/b8aff36b681443c19b14121d2968cecc.gif?#pic_left
[43d05bce27ea4447b7cfb0a8e4921856.gif]: https://img-blog.csdnimg.cn/43d05bce27ea4447b7cfb0a8e4921856.gif
[cc9f581316144de1989e14f882c39c83.gif]: https://img-blog.csdnimg.cn/cc9f581316144de1989e14f882c39c83.gif
[391731e897a3422abea02eb5d9acbc99.gif]: https://img-blog.csdnimg.cn/391731e897a3422abea02eb5d9acbc99.gif
[2940e3f2fcb14a2c8ef9bf8f61490484.gif]: https://img-blog.csdnimg.cn/2940e3f2fcb14a2c8ef9bf8f61490484.gif