JQuery之事件绑定01

最新推荐文章于 2023-05-16 10:18:33 发布

Jensen_79

最新推荐文章于 2023-05-16 10:18:33 发布

阅读量92

点赞数

分类专栏： JQuery 文章标签：事件操作 JQuery

本文链接：https://blog.csdn.net/qq_30036471/article/details/100021117

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery之事件绑定

Js的缺点
JQuery事件绑定

Js的缺点

代码存在冗余;
不能添加多个入口函数(window.onload);
原生js中有属性及代码存在浏览器不兼容情况；
原生js中代码容错率较低，前面代码执行错误则肯能会影响后面的代码执行不了；
原生js中api代码太长记起来不太方便{getElementId()/getElemTagName()};

JQuery事件绑定

**知识涉及：**

JQuery 标准绑定方式
JQuery on/off绑定方式
链式编程写法

Tips: 大多数代码知识已经写在代码注释中，这样做是为了更好的让原理与代码结合起来理解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery build event test</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        /*
        Tips:其实JQuery与js事件绑定结果是一样的只是语法不一样而已,不用想的太复杂;
        JQuery事件绑定两种常用方式
        - JQuery 标准绑定方式
            jq对象.事件方法(回调函数);
            Tips:至于回调函数代码需要根据自己的业务情况而定。
        */
        //Tips:这种方式叫做链式编程，但尽量不要追加太多事件
        $(function () {
           $('#name').mouseover(function () {
              alert('mouse comming...')
           }).mouseout(function () {
              alert('mouse out right now')
           })
        })
        //Tips: id名称需要用#代表之后追加id名称
        $(function () {
           $('#fname').click(function () {
                  alert('this is click test, just like javascript click test.');
           })
        })
        /*
        - Jquery on/off绑定及解绑方式
            jq对象.("事件名如：click",回调函数);
            jq对象.（"事件名");
        */
        $(function () {
            $('#btn1').on('click',function () {
               alert('hello')
            })
            $('#btn2').click(function () {
               $('#btn1').off('click');
               //选择你需要关闭哪个id中的什么触发,上面是关闭id为btn1 中的click事件
            })
        })
    </script>
</head>
<body>
<input id="name" value="This is mouse move test." type="text">
<br/>
<input id="fname" value="This is click test." type="text">
<br/>
<input id="btn1" type="button" value="This is on button.">
<br>
<input id="btn2" type="button" value="This is off button.">
<br>
</div>
</body>
</html>

Jensen_79

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery之事件绑定01

JQuery之事件绑定Js的缺点JQuery事件绑定Js的缺点代码存在冗余;不能添加多个入口函数(window.onload);原生js中有属性及代码存在浏览器不兼容情况；原生js中代码容错率较低，前面代码执行错误则肯能会影响后面的代码执行不了；原生js中api代码太长记起来不太方便{getElementId()/getElemTagName()};JQuery事件绑定*...
复制链接

扫一扫

专栏目录