<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>27-jQuery事件自动触发</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .father{

            width: 200px;

            height: 200px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

    <script src="js/jquery-1.12.4.js"></script>

    <script>

        $(function () {

            $(".son").click(function(){

                alert("son");

            }); 

            $(".father").click(function(){

                alert("father");

            }); 

            // 自动触发事件

            // $(".father").trigger("click");

            // $(".father").triggerHandler("click");

            /*

                trigger: 使用trigger自动触发事件，会触发事件冒泡

                triggerHandler：不会触发冒泡事件

            */

            // $(".son").trigger("click");

            // $(".son").triggerHandler("click");

            // $("input[type='submit']").click(function(){

            //     alert("submit");

            // });

            // trigger： 利用trigger自动触发事件，会触发默认行为

            // $("input[type='submit']").trigger("click");

            // triggerHandler  不会触发默认行为

            // $("input[type='submit']").triggerHandler("click");

            $("a").click(function(){

                alert("a");

            });

            // $("a").triggerHandler("click");

            $("a").trigger("click");

        });

    </script>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

    <a href="http://www.baidu.com">我是百度</a>

    <form action="http://www.taobao.com">

        <input type="text">

        <input type="submit">

    </form>

</body>

</html>

关于自动触发a标签将部分代码修改：

<script>

    $("span").click(function(){

                alert("a");

            });

            // $("span").triggerHandler("click");

            $("span").trigger("click");

</script>
<body>

<div class="father">

    <div class="son"></div>

</div>

<a href="http://www.baidu.com"><span>注册</span></a>

<form action="http://www.taobao.com">

    <input type="text">

    <input type="submit">

</form>

</body>

jQuery事件自动触发的更多相关文章

  1. Jenkins 实现Gitlab事件自动触发Jenkins构建及钉钉消息推送

    实现Gitlab事件自动触发Jenkins构建及钉钉消息推送 实践环境 GitLab Community Edition 12.6.4 Jenkins 2.284 Post build task 1. ...

  2. 第77天：jQuery事件绑定触发

    一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...

  3. 2015.1.10 解决DataGridView SelectionChanged事件自动触发问题

    DataGridView SelectionChanged事件总是在数据源更改时自动触发,这点很讨厌. 可用CellClick和KeyUp事件和一个函数替代SelectionChanged事件 pri ...

  4. jquery 事件的触发与绑定

    bind事件绑定: live事件绑定: hover事件绑定: one事件绑定 toggle事件绑定:

  5. jquery自动触发click事件

    $("").trigger("click"); //jquery的自动触发事件

  6. jQuery事件(四)

    一.基本事件函数下面事件函数中参数相关说明:eventType:事件类型,字符串'click' 'submit'多个事件类型可以通过用空格隔开[一次性绑定'click submit']eventDat ...

  7. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  8. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  9. jQuery实现自动调用和触发某个事件的方法

    1.比如我们通过jquery定义了一个点击事件,我们如何自动触发他: $(function(){    $('#button').click(function(){      alert('butto ...

  10. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

随机推荐

  1. AspNetCoreRateLimit应用于MVC项目求助

    AspNetCoreRateLimit应用于MVC项目求助 前言 之前发过一篇文章: .NET Core WebApi接口ip限流实践 - 妙妙屋(zy) - 博客园 (cnblogs.com) 然后 ...

  2. 聊一聊redis十种数据类型及底层原理

    概述 Redis 是一个开源的高性能键值数据库,它支持多种数据类型,可以满足不同的业务需求.本文将介绍 Redis 的10种数据类型,分别是 string(字符串) hash(哈希) list(列表) ...

  3. 【Vue2】编程式路由导航

    在Vue Router中,除了使用 创建 a 标签来定义导航链接之外,还可以使用Vue Router通过编写代码来实现导航. 他提供的三个实例方法:router.push.router.replace ...

  4. PaddlePaddle 飞桨复现 ResNeXt

    import paddle.nn as nn import paddle class BN_Conv2D(nn.Layer): """ BN_CONV_RELU &quo ...

  5. Lattics：一款简单易用、好看强大的「类脑式」知识管理工具，笔记应用与写作软件二合一

    如何选择一款适合自己的知识管理工具? 随着数字化时代的到来,越来越多的人意识到知识管理的重要性.笔记软件和写作软件作为一种常用的知识管理工具,一直以来备受关注.从最早的印象笔记.有道云.为知笔记.幕布 ...

  6. Python随机UserAgent库，让你不再手动敲UA！

    前言 之前也懵懵懂懂写过python爬虫,但是经常被网站的反爬机制干趴下,然后手动写了个随机UA库,情况才好些.今天在互联网畅游时发现,有一个能够产生随机UA的第三方库! 安装第三方库 老生常谈啦,p ...

  7. react-router-dom 6.0路由详解

    React react-router-dom 6.0路由使用 由于react路由版本的更新迭代,记录路由知识点 新react-router-dom地址,点击查看详情. 下面为使用的例子 Install ...

  8. 查看svn本地账户和密码

    最近由于抗击疫情需要远程办公,协同就必不可少了,都知道svn一般公司都是走内网,然而目前要连接公司svn就得重新指定地址,今日在重新指定时然我,输入用户名和密码一下子蒙了,平时一旦连接后就不需要再次输 ...

  9. 连接内网 SSH 新姿势，告别慢速度及防火墙限制

    近些年,因为某些原因,我们常常在家远程研发业务,当某些程序或业务代码在公司电脑上时,就需要访问公司电脑远程操作, SSH 登录 Linux 是一种非常常见的方式,但是在一些情况下,SSH 无法直接连接 ...

  10. ConcurrentHashMap是如何实现的？

    众所周知 ConcurrentHashMap 是 HashMap 的多线程版本,HashMap 在并发操作时会有各种问题,比如死循环问题.数据覆盖等问题.而这些问题,只要使用 ConcurrentHa ...