三：Jquery-event

﹏ヽ暗。殇╰゛Y 2021-11-17 10:24 250阅读 0赞

一:jq中事件  
1.页面载入事件

ready()方法
        格式:
            $(document).ready(function(){});
            $(function(){});

2.绑定事件

click(),dblclick(),focus(),blur(),mouseover(),mouseout(),change(),select()
        keydown(),keyup()

js事件模型:

第一种:在html标签上增加事件属性,让属性值等于处理该事件的函数名或程序代码
            第二种:在js代码中设置元素的事件属性,让属性值等于处理该事件的函数名或程序代码

jq事件一种统一的事件模型:

在页面加载完毕后,为每个选取元素的事件绑定响应函数
            $(function(){
                $("#btn").click(function(){//执行代码});    //统一的事件模型
                $("#btn").bind(type,function(){//执行代码});    //type表示事件类型
                //为所选对象绑定多个事件处理函数
                $("#btn").bind({type:function(){//执行代码},type:function(){//执行代码}});
            });

3.切换事件

hover():使元素在鼠标移入与移出的事件中进行切换
            hover(over,out);    //over:移入时处理的函数,out:移出时处理的函数
        toggle():依次调用N个指定的函数,直到最后一个,然后重复对函数进行调用
            toggle(
                function(){},
                function(){},
                function(){},...
            );

4.其它事件

one():为所选的元素绑定一个仅触发一次的处理函数
            one(type,function(){});     //type表示事件类型
        trigger():在所选的元素上触发指定类型的事件
            trigger(type);  //type表示触发事件的类型

二:事件机制

事件在触发后分为两个阶段:一个是捕获(capture),另一个是冒泡(bubbling).
        往往事件触发后,直接执行冒泡过程,冒泡实质就是事件执行中的顺序.(大部分浏览器不支持捕获,jq也不支持)
        
    (单击按钮,按钮的父标签div的单击事件也被触发,同时div的父标签body的单击事件也随之触发)
    冒泡过程:整个事件波及的过程就行水泡一样向外冒,故称为冒泡过程
    停止事件的冒泡过程:可以通过return false;语句实现.(单击按钮就执行单击事件,不触发其它父元素的单击事件)

三:开关

toggleClass():样式添加/删除开关
    hover():鼠标移入/移出开关
    toggle():显示/隐藏开关(没参数时)

四:获取元素的宽高

$("body").css("width");     //获取页面内容css样式中的宽度属性值
    $("body").height();         //获取页面内容的高度
    $(window).width();          //获取浏览器窗口的宽度
    $(window).css("height");    //获取浏览器窗口css样式中的高度属性值
    css("width/height"):值得形式是包含了单位"px"的字符串 -- "160px"
    height()/width():值是数字型的,更方便进行数学运算 -- 160

转载于:https://www.cnblogs.com/itzlg/p/10699622.html