JQuery事件编程

Love The Way You Lie 2022-05-18 02:51 218阅读 0赞

> 作者：西岭老湿

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

## 事件编程 ##

### 1 .页面载入事件 ###

05.PHP：

header('Content-type:image/png');
    sleep(3);
    $img = imagecreatetruecolor(100,100);
    imagepng($img);

05-1.html

<body>
    <img src="05.php" alt="">
    </body>
    <script>
        window.onload = function(){
         
            alert('图片加载完成');
        }
    </script>

**ready事件**

<body>
    <img src="05.php" alt="">
    </body>
    <script>
        //DOM 及所有资源加载完成后执行
        window.onload = function(){
         
            alert('图片加载完成');
        }
        //ready 当DOM加载完毕就会被触发运行
        // $().ready(function(){
         
        //     alert(1);
        // })
    
        //ready 的简化写法
        $(function(){
         
            alert('DOM 加载完毕');
        })
    </script>

### 2. jq中的事件绑定 ###

**原生js事件绑定语法：**  
DOM对象.on事件名称 = 事件的处理程序

**jq事件绑定语法：**  
jq对象.事件名称(事件的处理程序);

在JS中，事件绑定一共有三种形式：  
行内绑定、动态绑定、事件监听。  
问题：jQuery中的事件绑定是哪一种呢？

<body>
        <input type="button" value="点击">
    </body>
    <script>
        //jq对象 事件绑定
        $('input').click(function(){
         
            alert(4);
        })
        $('input').click(function(){
         
            alert(5);
        })
    </script>

两次事件被先后触发，第一次绑定并没有被替换，因此可知，  
jq的事件绑定是**事件监听**

### 3.jq中常用事件 ###

**所有事件都是方法**

blur(fn) ：当失去焦点时触发  
change(fn) ：当状态改变时触发  
click(fn) ：当单击时触发  
dblclick(fn) ：当双击时触发  
focus(fn) ：当获得焦点时触发  
keydown(fn) ：当键盘按下时触发  
keyup(fn) ：当键盘弹起时触发  
keypress(fn) ：当键盘按下时触发  
load(fn) ：和ready一样都是页面载入事件  
unload(fn) ：当页面关闭时触发  
mousedown(fn) ：鼠标按下时触发  
mouseup(fn) ：鼠标弹起时触发  
mousemove(fn) ：鼠标移动时触发  
mouseover(fn) ：鼠标悬浮时触发  
mouseout(fn) ：鼠标离开时触发  
resize(fn) ：当窗口大小改变时触发  
scroll(fn) ：当滚动条滚动式触发  
select(fn) ：当文本框中的文本选中时触发  
submit(fn) ：当表单提交时触发

### 4. 事件切换 ###

#### 4.1 ####

问题及效果：  
京东天猫等网站首页轮播图，鼠标悬浮之上时，轮播图停止轮播效果，鼠标离开后，轮播效果继续；

知识点：  
**hover(fn1,fn2)：**  
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。  
当鼠标移出这个元素时，会触发指定的第二个函数。

案例代码：

<body>
        <img src="./05-6hover.gif" alt="" id="img">
    </body>
    <script>
        $('#img').hover(function(){
         //鼠标悬浮选中元素之上
            $(this).attr('src','05-6hover.png');
        },function(){
         //鼠标离开选中元素
            $(this).attr('src','05-6hover.gif');
        })
    </script>

#### 4.2 ####

问题及效果：  
点击折叠再点击展开效果，类似‘我的电脑’侧边目录；

知识点：  
**toggle(fn1,fn2,fn3…，fnN)：**  
点击切换事件，第一次点击执行fn1,第二次点击执行fn2,第三次点击执行fn3，  
当所有函数执行完后再点击，则再次从第一个开始执行；

案例代码：

<head>
        <title></title>
        <script src="./jq183.js"></script>
        <style>
            div,h2{
         margin: 0;padding: 10px}
            #box{
         width: 300px;}
            #box h2{
         background-color: #369;}
            #box div{
         border: 1px solid red; height: 200px}
        </style>
    </head>
    <body>
        <div id="box">
            <h2>折叠效果</h2>
            <div id="box2">
                中国男足太臭，赶快折叠别让人看
            </div>
        </div>
    </body>
    <script>
        $('#box').toggle(function(){
         
            $('#box2').hide();
        },function(){
         
            $('#box2').show();
        })
    </script>

### 5. 事件处理 ###

问题及效果：  
某不可描述之网站有不可描述的资源；  
但点击下载时，弹出广告页面，再回去点击下载后，下载生效；

知识点：  
**one(‘事件1 事件2 事件N’,fun) ：**  
为选中元素绑定 一次性 事件(多个事件用空格隔开)；

**bind(‘事件1 事件2 事件N’,fun) :**  
为选中元素绑定一个或多个事件(多个事件用空格隔开)；  
注：jQuery 3.0中已弃用此方法，请用 on()代替。

**unbind(‘事件1 事件2 事件N’) :**  
bind 的反向操作，为选中元素 删除 一个或多个事件(多个事件用空格隔开)；  
jQuery 3.0中已弃用此方法，请用 off()代替。

案例代码：

<body>
        <input type="button" id="btu" value="下载">
    </body>
    <script>
        $('#btu').one('click',function(){
          //为按钮绑定一次性点击事件
            //在新标签页打开广告
           window.open('http://www.baidu.com');
           //为元素绑定多个事件
           $(this).bind('click mouseleave',function(){
         
               alert('下载成功');
               //删除绑定过的事件
               $(this).unbind('mouseleave');
           })
        })
    </script>

### 6. 事件对象 ###

#### 6.1 阻止事件冒泡 ####

问题及效果：  
什么是事件冒泡？？  
![这里写图片描述][70]  
本意是：  
div被点击时才会触发事件，但是，因为事件冒泡特性，未被点击的div也触发了事件的执行；  
因此，我们需要阻止事件的冒泡行为；

事件冒泡问题代码展示：

<head>
        <title></title>
        <meta charset="UTF-8">
          <script src="jq183.js"></script>
         <style>
            div{
         padding: 50px}
            #div3{
         width: 300px;height: 300px;background-color: red}
            #div2{
         width: 200px;height: 200px;background-color: yellow}
            #div1{
         width: 100px;height: 100px;background-color: blue}
         </style>
    </head>
    <body>
        <div id="div3">
            <div id="div2">
                <div id="div1"></div>
            </div>
        </div>
    </body>
    <script>
        $('#div3').click(function(){
         
            alert(3);
        })
        $('#div2').click(function(event){
         
            alert(2);
        })
        $('#div1').click(function(){
         
            alert(1);
        })
    </script>

修改以上代码中 JS 部分，阻止事件冒泡；

知识点：  
**event.stopPropagation()**  
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

#### 6.2 阻止默认行为 ####

问题及效果：  
什么是默认行为？  
如：a 标签的点击跳转、submit按钮的点击提交、选中文本的拖拽搜索等等……

有时我只是需要a标签的样式并不希望有点击跳转的效果；  
用户填写完表单时，表单内容也会在前台JS中进行验证，内容不合法，数据也不能提交；

因此，在某些时候，我们需要阻止标签元素的默认行为；

案例代码：

<body>
        <a href="http://www.qq.com" id="tx">腾讯链接</a> <br>
        <hr>
        <form action="05-8-2.php" method="get">
            用户名：<input type="text" name="names" value="" id="names"><br>
            <input type="submit" value="提交" id="sub">
        </form>
    </body>
    <script>
        $('#tx').click(function(){
         
            alert(1);
        })
    
        $('#sub').click(function(){
         
            if($('#names').val()==''){
                alert('用户名不能为空');
            }
        })
    </script>

修改上述代码的JS部分，阻止元素默认行为

知识点：  
**event.preventDefault()**  
阻止默认事件行为的触发。

[70]: /images/20220518/170cd313f2e3430eb2db616a9b0c3941.png