【jQuery】之事件

时间 2019-12-08

标签 jQuery 事件栏目 JQuery 繁體版

原文原文链接

jQuerycss

事件jquery

1.页面加载

以DOM提供的load事件和jQuery中的ready()方法来加载页面浏览器

<script>
        window.onload = function () {
            var qyc = document.getElementById('qyc');
            console.log(qyc);
        }
//        window对象等于浏览器窗口
         /*load事件-当浏览器窗口加载完毕是被触发
         * 事件处理函数中代码逻辑，在浏览器加载中完毕后在执行*/
    </script>
</head>
<body>
<!-- HTML元素 -->
<button id="qyc">按钮</button>
</body>

2.事件绑定

事件绑定和解绑

单事件绑定： type：事件类型的字符串 data：做为event data属性值给事件对象的格外数据对象 callback：绑定每一个元素的事件上面处理函数函数

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    /*bind(type, data, callback)方法 - 绑定事件*/
    /*function click1(){
        console.log('this is button.');
    }
    function click2(){
        console.log('this is button too.');
    }
    $('#btn').bind('click', click1);
    $('#btn').bind('click', click2);*/
    /*
        unbind(type, data, callback)方法 - 解绑定事件

     */
    // $('#btn').unbind('click', click1);

    /*
        bind()与unbind()中data参数
        * data参数的值-利用event事件对象data属性进行接收
        * 该参数的数据内容只能在事件的处理函数中被使用
      */
    // var obj = { a : '犬夜叉' };
    $('#btn').bind('click', { a : '犬夜叉' }, function(event){
        // var obj = { a : '犬夜叉' };
        console.log(event.data);
    });

</script>
</body>

多事件绑定和解绑

多事件绑定： type:事件类型的字符串一个或多个，有空格分隔多个事件 data：做为event data属性值给事件对象的格外数据对象 callback：绑定每一个元素的事件上面处理函数this

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="qh">游戏列表</div>
<ul>
    <li>端游</li>
    <li>手游</li>
    <li>页游</li>
</ul>
<script>
    /*$('#title').bind('mouseover', function(){
        $('ul').css('display','block');
    });
    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
$('#title').bind('mouseout', function(){
        $('ul').css('display','none');
    });*/
    /* jQuery支持链式操做
   $('#title').bind('mouseover', function(){
       $('ul').css('display','block');
   }).bind('mouseout', function(){
       $('ul').css('display','none');
   });
   */


    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
    // bind()方法-多事件绑定，事件名称之间使用空格分隔
    /*
        unbind()方法
        1.没有指定任何事件时-将指定元素的全部事件所有解绑定
        2.一个事件名称时-将该元素的指定当个事件解绑定
        3.多个事件名称时-将该元素的指定多个事件解绑定
     */
    $('#title').unbind('mouseover mouseout');
</script>
</body>

事件绑定方法对比

<script src="js/jquery.js"></script>
</head>
<body>
<script>
    /*
        jQuery中提供多组事件绑定与解绑定的方法
        * bind()与unbind()-jQuery 3.0版本后删除方法
        * on()与off()方法-jQuery 1.7版本后新增方法
          * 其实bind()与unbind()的底层方法就是on()和off()
        * live()与die()-jQuery 1.7版本后删除方法
          * 做用-实现事件委托
        * delegate()与undelegate() - jQuery 1.6版本后新增方法，jQuery 
       3.0版本后删除方法
          * 做用-实现事件委托
        * one()-为事件绑定一次性的函数
     */

</script>

3.事件切换

hover()方法：over：鼠标移动到元素上触发函数 out：鼠标移开元素触发函数code

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="qh">游戏类型</div>
<ul>
    <li>端游</li>
    <li>手游</li>
    <li>页游</li>
</ul>
<script>
    /*
        鼠标悬停事件
        * mouseover-表示鼠标悬停在指定元素之上
        * mouseout-表示鼠标从指定元素上移开
     */
    $('#qh').bind('mouseover', function(){
        $('ul').css('display','block');
    });

    $('#qh').bind('mouseout', function(){
        $('ul').css('display','none');
    });

    // jQuery提供hover(over, out)方法
    $('#qh').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

</script>
</body>

4.事件模拟

以trigger()方法模拟触发元素绑定的事件对象

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    $('#qyc').bind('click',function() {
//    绑定事件-由用户行为进行触发，调用处理函数
        console.log('you my button');
    });
    $('#qyc').trigger('click');
//    模拟用户触发事件
</script>
</body>