jQuery学习笔记14-事件自动触发、自定义事件

100 阅读 0 评论 66 点赞

我是靠谱客的博主爱撒娇电灯胆，最近开发中收集的这篇文章主要介绍jQuery学习笔记14-事件自动触发、自定义事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、事件自动触发

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件自动触发</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: #FFEE00;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
* 1.什么是事件自动触发
* 打开浏览器时，添加的事件就会自动触发
* 事件自动触发使用的方法有：trigger、triggerHandler
*
*2.trigger和triggerHandler的区别
* trigger会触发事件冒泡，triggerHandler不会触发事件冒泡
* trigger会触发默认行为，triggerHandler不会触发默认行为
* */
$(".son").click(function () {
alert("son")
});
$(".father").click(function () {
alert("father")
});
//trigger自动触发click时，会弹出两个弹框
// $(".son").trigger("click");
//trigger自动触发click时，会弹出son弹框
// $(".son").triggerHandler("click");
$("input[type='submit']").click(function () {
alert("submit");
});
//trigger自动触发click时，点击确定后，会跳转到淘宝首页
// $("input[type='submit']").trigger("click");
//triggerHandler自动触发click时，点击确定后，不会跳转到淘宝首页
// $("input[type='submit']").triggerHandler("click");
$("span").click(function () {
alert("a");
});
//要想让trigger自动触发a标签的默认行为，需要将注册写到span标签下
$("span").trigger("click")
})
</script>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<a href="https://www.baidu.com/"><span>注册</span></a>
<form action="https://www.taobao.com/">
<input type="text">
<input type="submit">
</form>
</body>
</html>

二、自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery自定义事件</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: #FFEE00;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
* 自定义事件
* 自定义事件必须通过on绑定
* 自定义事件必须通过trigger来触发
* */
$(".father").on("douclick",function () {
alert("father");
});
$(".father").trigger("douclick");
})
</script>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<a href="https://www.baidu.com/">注册</a>
<form action="https://www.taobao.com/">
<input type="text">
<input type="submit">提交
</form>
</body>
</html>