第七节 .ready()、事件绑定

作者: 最美下雨天 | 来源:发表于2018-06-12 14:50 被阅读16次

第七节 .ready()、事件绑定
jqurey事件 ready用法
jQuery事件
03.JQuery的事件处理
第 6 章 jQuery 事件与应用
jquery-事件
面试笔记
JS 事件监听、事件委托2018-07-10
JS-事件绑定
事件绑定、事件冒泡与捕获

1、文档描述：https://www.jquery123.com/ready/

image.png

根据上面的描述，就是当DOM就绪时会执行，那么这个方法与document.onload有什么区别呢？

document.onload=function()
            {
                
            }

onload事件呢，是整个页面完全呈现时才会触发，比如说这个页面上有大量的图片，如果图片还没有接受完整，这个事件也是不会触发的，但是在大多数情况下，只要DOM结构完全加载时，脚本就应该可以运行，所以这个时候就要用.ready()方法了，传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。
以下三个语法是全部等价的：

$(document).ready(handler)
$().ready(handler)//不推荐使用
$(handler)

2、事件绑定

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>网页的标题</title>
        
        <script type="text/javascript" src="js/jquery-1.12.4.min.js">
            
        </script>
        
        <script type="text/javascript">
            
            $(function(){
                //这就相当于写在了ready()里面
                $("#btest").click(function(){
                    alert("jquery测试绑定事件")
                })
            })
            
            
        </script>
        
        
        
    </head>

    <body>
        <input type="button" value="测试事件绑定" id="btest" />
    </body>

</html>

网页显示：

image.png

3、常见事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <style type="text/css">
            #e02{
                border: 1px solid #000000;
                height: 200px;
                width: 200px;
            }
            
        </style>
        <script src="js/jquery-1.12.4.min.js"></script>
        
        <script type="text/javascript">
            var span=document.getElementById("e01");
            span.innerHTML="sssss"
            $(document).ready(function(){
                $("#e01").blur(function(){
                    $("#textMsg").html("文本框失去焦点：blur");
                }).focus(function(){
                    $("#textMsg").html("文本框获得焦点：focus");
                }).keydown(function(){
                    $("#textMsg").append("键盘按下：keydown");
                }).keypress(function(event){
                    $("#textMsg").append("键盘按：keypress");
                }).keyup(function(){
                    $("#textMsg").append("键盘弹起：keyup");
                });
                
                var i = 0;
                $("#e02").mouseover(function(){
                    $("#divMsg").html("鼠标移上：mouseover");
                }).mousemove(function(){
                    //$("#divMsg").html("鼠标移动：mousemove , " + i++ );
                }).mouseout(function(){
                    $("#divMsg").html("鼠标移出：mouseout");
                }).mousedown(function(){
                    $("#divMsg").html("鼠标按下：mousedown");
                }).mouseup(function(){
                    $("#divMsg").html("鼠标弹起：mouseup");
                });
                
                $("#e03").click(function(){
                    $("#buttonMsg").html("单击：click");
                }).dblclick(function(){
                    $("#buttonMsg").html("双击：dblclick");
                });
                
            });
            
            
            
            
            
        </script>
        
    </head>
    <body>
        <input id="e01" type="text" /><span id="textMsg"></span> <br/>
        <hr/>
        <div id="e02" ></div><span id="divMsg"></span> <br/>
        <hr/>
        <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
    </body>
</html>