on()方法用来处理事件。jQuery会处理所有浏览器的兼容性问题。

on()方法可以指定影响哪个事件，相当于JavaScript中的addEventListener()事件监听。

on()方法有两个参数：

第一个参数，是事件，同addEventListener()事件监听的第一个参数一样，用引号括起事件名。

第二个参数，是代码，可以命名函数，也可以是匿名函数。

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>事件方法</title>

        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">

        </script>

    </head>

    <body>

        <div>

            <ul id="ul">

                <li id="a">鼠标</li>

                <li id="b">键盘</li>

                <li id="c">屏幕</li>

                <li id="d"><a>主机</a></li>

            </ul>

        </div>

        <script>

            $('li').on('click',function(){

                alert($(this).text());

            });

        </script>

    </body>

</html>

　　常见的jQuery事件

  • 用户界面：focus、blur、change
  • 键盘：input、keydown、keyup、keypress
  • 鼠标：click、dblclick、mouseup、mousedown、mouseover、mousemove、mouseout、hover
  • 表单：submit、select、change
  • 文档：ready、load、unload
  • 浏览器：error、resize、scroll

事件方法on()的更多相关文章

  1. jQuery 事件方法

    事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将 ...

  2. 【转】NGUI研究院之三种方式监听NGUI的事件方法（七）

    NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不 ...

  3. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  4. js在控件原有的事件方法中加入自己的方法

    有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...

  5. jQuery 事件 方法

    jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向元素添加事件处理程序 blur() ...

  6. php 中的魔术方法-----“事件方法”

    来源:http://lornajane.net/posts/2012/phps-magic-__invoke-method-and-the-callable-typehint php 中的这个对象 , ...

  7. angular指令监听ng-repeat渲染完成后执行自定义事件方法

    今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...

  8. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

  9. Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

    JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .ind ...

随机推荐

  1. springboot环境下配置过滤器和拦截器

    以前我们在配置过滤器和拦截器的时候,都是一个类继承一个接口,然后在xml中配置一下就ok 但是,但是,这是springboot的环境,没有xml的配置.所以我们还要继续学习啊啊啊啊啊~~~~~ 先简单 ...

  2. 获取当前操作系统的ip

    代码如下: #include "stdafx.h" #include <WinSock2.h> int get_local_ip() { WSADATA wsaData ...

  3. git commit 时出现：please enter the commit message for your changes

    每次准备提交前,先用 git status 看下,是不是都已暂存起来了,然后再运行提交命令 git commit: $ git commit 这种方式会启动文本编辑器以便输入本次提交的说明.(默认会启 ...

  4. POJ - 1905 Expanding Rods（二分+计算几何）

    http://poj.org/problem?id=1905 题意 一根两端固定在两面墙上的杆,受热后变弯曲.求前后两个状态的杆的中点位置的距离 分析 很明显需要推推公式. 由②的限制条件来二分角度, ...

  5. bzoj千题计划300：bzoj4823: [Cqoi2017]老C的方块

    http://www.lydsy.com/JudgeOnline/problem.php?id=4823 讨厌的形状就是四联通图 且左右各连一个方块 那么破坏所有满足条件的四联通就好了 按上图方式染色 ...

  6. 使用paramiko远程执行命令、下发文件

    写部署脚本时,难免涉及到一些远程执行命令或者传输文件. 之前一直使用sh库,调用sh.ssh远程执行一些命令,sh.scp传输文件,但是实际使用中还是比较麻烦的,光是模拟用户登陆这一点,还需要单独定义 ...

  7. react框架的状态管理

    安装: cnpm install --save redux cnpm install --save react-redux   安装好后导入模块内容: impor {createStore} from ...

  8. java程序运存扩容

    线上程序随着业务增多,运行的越来越慢,初步判定是因为内存分配的太小导致频繁的进行GC和OOM,于是着手增加内存上限. 增加内存上限都知道是修改java启动的opt,因为服务容器是tomcat 首先是在 ...

  9. C# List分页

    假设你每页10条数据当前是第3页 跳到第4页则:List.Skip((4-1)*10).Take(10) 本文来自SunShine,转载请标明出处: http://do.jhost.cn/sunshi ...

  10. 基于URL的权限管理(三)

    思路:先创建一个专门的类ActiveUser用于存储用户登录的信息,主要用于存储用户id,账户,名称,菜单,权限. 认证拦截器主要是查看用户是否已登陆,如果没有转发到登陆界面,用户用账户跟密码登录时候 ...