基础事件(一)-CSDN博客

JavaScript有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jQuery为开发者更有效率的编写事件行为，封装了大量有益的事件方法供我们使用。

绑定事件

在JavaScript课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、 select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考手册中的事件部分。

jQuery通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，type表示一个或多个类型的事件名字符串；[data]是可选的，作为event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn表示绑定到指定元素的处理函数。

有html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础事件</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <input type="button" value="按钮" />
    <div></div>
</body>
</html>

使用点击事件：

$("input").bind("click", function() { //点击按钮后执行匿名函数
    alert("弹窗！");
});

普通处理函数：

$("input").bind("click", fn); //执行普通函数式无须圆括号
function fn() {
    alert("处理函数！");
}

可以同时绑定多个函数：

$("input").bind("click mouseover", function() { //点击和鼠标移入按钮分别执行一次
    alert("弹窗！");
});

$("input").bind("mouseover mouseout", function() { //鼠标移入和移出按钮分别执行一次
    $("div").html(function(index, value) {
        return value + "1";
    });
});

通过对象键值对绑定多个参数：

$("input").bind({
    "mouseover":function() { //事件名的引号可以省略
        alert("移入");
    },
    "mouseout":function() {
        alert("移出");
    }
});

事件名的引号可以省略，即：

$("input").bind({ //传递一个对象
    mouseover:function() { 
        alert("移入");
    },
    mouseout:function() {
        alert("移出");
    }
});

对于以下jQuery代码：

$("input").bind("click mouseover", function() {
    alert("弹窗！");
});

使用unbind删除绑定的事件：

$("input").unbind(); //删除全部事件

使用unbind参数删除指定类型事件：

$("input").unbind("click"); //只删除点击事件

又对于以下jQuery代码：

$("input").bind("click", fn1);
$("input").bind("click", fn2);
function fn1() {
    alert("fn1");
}
function fn2() {
    alert("fn2");
}

使用unbind参数删除指定处理函数的事件：

$("input").unbind("click", fn2); //删除了click事件绑定了fn2的

简写事件(一)

为了使开发者更加方便的绑定事件，jQuery封装了常用的事件以便节约更多的代码，我们称它为简写事件。

简写事件绑定方法

方法名	触发事件	描述
click(fn)	鼠标	触发每一个匹配元素的click(单击)事件
dbclick(fn)	鼠标	触发每一个匹配元素的dbclick(双击)事件
mousedown(fn)	鼠标	触发每一个匹配元素的mousedown(点击后)事件
mouseup(fn)	鼠标	触发每一个匹配元素的mouseup(点击弹起)事件
mouseover(fn)	鼠标	触发每一个匹配元素的mouseover(鼠标移入)事件
mouseout(fn)	鼠标	触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn)	鼠标	触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn)	鼠标	触发每一个匹配元素的mouseenter(鼠标穿过)事件
mouseleave(fn)	鼠标	触发每一个匹配元素的mouseleave(鼠标穿出)事件
keydown(fn)	键盘	触发每一个匹配元素的keydown(键盘按下)事件
keyup(fn)	键盘	触发每一个匹配元素的keyup(键盘按下弹起)事件
keypress(fn)	键盘	触发每一个匹配元素的keypress(键盘按下)事件
unload(fn)	文档	当卸载本页面时绑定一个要执行的函数
resize(fn)	文档	触发每一个匹配元素的resize(文档改变大小)事件
scroll(fn)	文档	触发每一个匹配元素的scroll(滚动条拖动)事件
focus(fn)	表单	触发每一个匹配元素的focus(焦点激活)事件
blur(fn)	表单	触发每一个匹配元素的blur(焦点丢失)事件
focusin(fn)	表单	触发每一个匹配元素的focusin(焦点激活)事件
focusout(fn)	表单	触发每一个匹配元素的focusout(焦点丢失)事件
select(fn)	表单	触发每一个匹配元素的select(文本选定)事件
change(fn)	表单	触发每一个匹配元素的change(值改变)事件
submit(fn)	表单	触发每一个匹配元素的submit(表单提交)事件

html代码不变，jQuery代码如下：

$("input").click(function() {
    alert("单击！");
});

$("input").dblclick(function() {
    alert("双击！");
});

$("input").mousedown(function() {
    alert("鼠标左键按下!");
});

$("input").mouseup(function() {
    alert("鼠标左键按下弹起!");
});

$(window).unload(function() { //一般unload卸载页面，新版浏览器应该是不支持的，火狐要设置一个权限(?)
    alert("1"); //一般用于清理工作
});

$(window).resize(function() { 
    alert("文档改变了"); 
});

html代码若为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础事件</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <input type="button" value="按钮" />
    <div></div>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>
</html>

现在，再测试scroll事件：

$(window).scroll(function() { 
    alert("滚动条改变了"); 
});

若html(部分)代码若为：

<input type="text" value="按钮" />

现在，再测试select事件：

$("input").select(function() { 
    alert("文本选定！"); 
});

再来测试change事件：

$("input").change(function() { 
    alert("文本改变！"); 
});

若html代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础事件</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form>
        <input type="submit" value="按钮" />
    </form>
</body>
</html>

测试submit事件：

$("form").submit(function() { 
    alert("表单提交！"); 
});

转载于:https://www.cnblogs.com/yerenyuan/p/5425845.html