欢迎光临散文网 会员登陆 & 注册

千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip

2023-07-12 18:08 作者:bili_99700158785  | 我要投稿

jquery事件的绑定方式有以下几种:

+ on()

    1. 绑定点击事件,事件冒泡机制仍然存在(这种绑定后续新加入的同类型的节点就不会有这个事件了)

        ```js

        $('ul').on('click',function(){

                console.log('ul click');

        })

        ```

    2. 事件委托:给某个元素绑定事件。后续加入的相同的节点也可以有这个事件,只需要在on的第二个参数处传递一个标签元素即可

        ```js

        $('ul').on('click', 'button', function () {

                console.log('ul click');

        })

        ```

    3. 传参数(必须是一个对象)

        ```js

        $('ul').on('click', {name:'karvin'}, function (e) {

                console.log(e);

            })

        ```

    4. 事件委托+传参(传参的形式随意)

        ```js

        $('ul').on('click', 'button',{name:'karvin'}, function (e) {

                console.log(e);

            })

        ```

+ one

    - 一次性事件,点击完成之后就会解绑

        ```js

        $('ul').one('click','button',function(){

                console.log('ul');

            })

        ```

+ 常用的方法函数

    click(),mouseover(),mouseout(),blur(),change(),input()

    - 也支持链式绑定

    - 传递参数,参数形式可以多样

        ```js

        $('ul li').click({name:'karvin'},function(e){

            console.log('click',e.data);

        }).mouseover({name:'karvin'},function(e){

            console.log('mouseover',e.data);

        })

        ```

+ off()

    - off():解绑所有的事件

    - off('click'):解绑click事件

    - off('click',"要解绑的处理函数名")

        ```js

        function A(){

            console.log('AAA');

        }

        function B(){

            console.log('BBB');

        }

        $('ul li').on('click',A).on('click',B)

        $('ul li').off('click',A)

        ```

+ 补充知识点:普通节点转换成jquery节点

    - document --->  $(document)

原生js绑定事件和解绑事件的回顾:

jquery的绑定事件与解绑事件与原生js的绑定事件的方式不太一样,原生js绑定事件有两种方式:第一个是on+事件类型的方式,第二个是addEventListener的方式。解绑的方式两种不同的绑定当时也有不同的解绑方式。第一种方式的解绑方式只需将其置空就可,第二种方式需要使用removeEventListener才可。

千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip的评论 (共 条)

分享到微博请遵守国家法律