亚博全站| jQuery事件绑定,事

浏览: 193次 来源:网络整理 作者:佚名

2021-03-09 23:00:19

jQuery风波1. 事件注册

1.1 普通风波注册

.bind() --- 重点

2.1.2 事件指派(事件委托)

.on() --- 重点

.delegate() --- 了解

窗口加载风波

原生:

window.onload = function(){}

// DOM加载事件
window.onload = function(){
        //原生获取
        var box = document.querySelector("#box");
        //console.log(box);
    }

作用: 等待页面中所有的资源加载完毕后执行的代码

所有资源: 图片 css样式 htmlDom 视频...

缺点:同一风波只能注册一次,如果重复注册多次欧宝体育 ,那么前面的将会覆盖之前的

jQuery中DOM加载风波

语法:

       $(document).ready(function(){})
       })

方式一:

    $(document).ready(function(){
            //jq获取
            var box2 = $("#box");
            console.log(box2.html());
            console.log(box2.attr("title"));
        });

方式二(常见书写形式):

       $(function(){
            //jq获取
            var box2 = $("#box");
            console.log(box2.html());
            console.log(box2.attr("title"));
        });

简写:

$().ready(function(){})

$(function(){}) --- 推荐使用

注意:

jquery绑定自定义事件_jquery绑定事件的方法_jquery 绑定 blur事件

jQuery的DOM加载风波jquery绑定自定义事件,可以注册多次,从加载速率上比较欧宝体育 ,jQuery的DOM加载风波相比原生的窗口加载风波要快一些,由于须要加载的资源少一些四川快乐12 ,并且有缩写方式,原生只有一种书写形式

jq窗口加载风波(补充)

    $(window).load(function(){});

1.普通风波注册

        $("div").bind("click",function(){
           alert(12);
        });

2.一个风波注册一个事件处理函数

    $("div").bind("click",function(){
       alert(12);
    });

3.一个风波注册多个风波处理函数

链式DOM操作----jQuery的特性,内部函数功能代码以后会返回对象

    $("div").click(function () {
        alert(3);
    }).click(function () {
        alert(4);
    });

4.两个风波类型同时注册一个事件处理函数

    //需求: 移入div框,如果当前含有类名test,就删除,否则就添加
    //需求: 移出div框,如果当前含有类名test,就删除,否则就添加
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("test");
    });

5.多个风波类型对应不同的风波处理函数

    $("div").click(function(){
        alert(1)
    }).mouseover(function () {
        $(this).css("background" ,"deepskyblue")
    }).mouseout(function () {
        $(this).css("background" ,"red")
    })

链式DOM操作是jQuery的一种特性。

理解 jQuery中可以实现链式DOM操作的缘由,由于this关键字问题 (jQuery中使this永远指向调用者)

    ;(function ($) {
        var _that;
        // 实现插件功能函数
        function _插件名 () {
            // 保留this
            _that = this;
            // 插件功能代码
            // 返回this 方便链式调用
            return _that;
        }
        // 挂在jQuery的原型上
        $.fn.插件名 = _插件名;
    })(jQuery)

6. 普通风波注册出现的bug

问题: 对于未来新增的元素不存在风波行为

2.事件指派风波指派原理

1.1 子元素的风波冒泡到父元素 委托给父元素绑定风波

1.2 事件指派可以解决的问题

事件指派

2.1 语法

jq对象(父辈元素).delegate(子级元素,事件类型,事件处理函数);

注意: 早期使用比较多,现在不怎样使用

//需求:点击button按钮,在box框中追加新的段落元素
$("button").click(function () {
    //对于未来新增的元素不存在事件行为
    $("

这是新增元素

").appendTo("#box"); }); //需求:给box框中所有段落注册点击事件 $("#box").delegate("p","click" ,function(){ alert(2); })

2.2句型 -- 推荐使用

jq对象(父辈元素).on(事件类型,子级元素,事件处理函数)

现在都用on给绑定风波

 $("#box").on("click" ,"p",function(){
            alert(2);
        })

1. 事件注销 -- 了解

        $("div").unbind();//注销所有事件
        $("div").unbind("click");//注销所有指定类型的事件
        $("div").unbind("click",a);//注销所有指定类型的指定处理函数事件

值得注意的是 :

注销指定类型的指定风波处理函数风波,要使用该函数的名称,才是指代同一个函数四川快乐12 ,函数为引用数据类型,存放在堆中四川快乐12 ,要使用引用地址才指代同一个,如果方式一样,也不是指代同一个函数亚博APP欧宝体育 ,而只是相貌一样的不同的两个函数

注销指定风波处理函数jquery绑定自定义事件亚博APP安全有保障 ,函数要抽出去

1. 合成风波

语法:

        jq对象.hover(function(){
            //相当于mouseenter  mouseover
        },function(){
            //相当于mouseleave  mouseout
        });

mouseover和mouseenter的区别:

1. 事件对象

// 需求 点击页面,判断点击的是哪个键
$(function() {
        $(document).mousedown(function(event) {
            //1:鼠标左键;2:鼠标中建;3:鼠标右键  
            alert(event.which);
        });
    });

1. 表单风波jQuery自定义风波类型

1.自定义事件

什么叫自定义事件

在jQuery内部没有的风波类型 可以通过trigger()自己自定义

2.实现自定义风波的步骤(三步)

    
    

版权声明:本文系亚博APP-亚博APP手机版独家稿件,未经授权,不得转载。