早期自学jQuery-二事件

本节目录

----------①鼠标事件

----------②键盘事件

----------③表单事件

----------④文档窗口事件

----------⑤举例，按下回车键触发事件

事件函数

指当THNL文档中发生某些事件时调用的函数方法，通常把事件处理方法放到<head>的jQuery中

常用的事件：

.ready()文档就绪事件

一、鼠标事件

.click()鼠标点击事件

.dbclick()鼠标双击事件

.mouseenter()鼠标穿过时事件

.mouseleave()鼠标离开时事件

.mousemove()鼠标移上时事件

.mouseover()鼠标位于元素上方时事件

.mouseup()鼠标松开事件

.mousedown()鼠标按下事件

二、键盘事件

.keydown()键盘按下事件

.keyup()键盘松开事件

.keypress()只在输入字符时获得事件，每个字符一次事件

三、表单事件

.submit()提交表单时事件

.change()输入域发生变化时事件

.focus()输入框被选中获得焦点时事件

.blur()输入框失去焦点时事件

四、文档窗口事件

.load()指定元素已经加载时事件

.resize()浏览器窗口改变事件

.scroll()可滚动元素滚动时事件（window对象可用）

.unload()离开关闭页面时发生事件

五、按键回车事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> 
</script>
<script>
        $(function(){
                document.onkeydown = function(e){ 
                    var enter = document.all ? window.event : e;
                    //变量ev使用三元运算符定义 判断 ie浏览器？ 结果1=ie浏览器 ： 结果2=e
                    if(enter.keyCode==13) {
                        $("#picture").css({"display":"block"});//处理事件
                    }
                    else{
                        $("#picture").css({"display":"none"});
                    }
                }
        });  
</script>
</head>

<body>
    <img src="../../博客/2.jpg" alt="小脸" style="display: none;" id="picture" />

</body>
</html>