<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

</head>

<body>

<input type="button" id="btn" value="点击">

<ul>

    <li>link1</li>

    <li>link2</li>

    <li>link3</li>

    <li>link4</li>

    <li>link5</li>

    <li>link6</li>

</ul>

</body>

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

<script>

    // 赋值：不允许重复绑定，没有兼容。

    // 监听：可以重复绑定，有兼容

    $("#btn").click(fn)

    function fn(){

        console.log("hello")

    }

     $("#btn").click(function(){

         console.log(2)

     })

    // 总结：jq中只有监听式绑定事件，没有赋值式

    // 注意：jq中只有监听式绑定事件

    // 1.事件名绑定

    // 元素.事件名(函数)

     $("#btn").mousedown(function(){

         console.log(1)

     })

    // 2.on绑定,可做事件委托

     $("#btn").on("click.a",function(){

         console.log(1)

     })

     $("#btn").on("click.b",function(){

         console.log(2)

     })

    // off删除on绑定的方法

     $("#btn").off("click.a")

    // 事件委托,click后面写上委托的元素

     $("ul").on("click","li",function(){

         console.log(this)

     })

    // 3.bind绑定，不能时间委托

     $("#btn").bind("click.a",function(){

         console.log(1)

     });

     $("#btn").bind("click.b",function(){

         console.log(2)

     });

     // unbind删除bind绑定的方法

     $("#btn").unbind("click.a")

    // 4.one绑定,执行一次之后就结束这个事件

     $("#btn").one("click",function(){

         console.log(1)

     })

    // 5.hover绑定：没有事件冒泡，第一个函数是进入，第二个函数是出来。只写一个就只有进入事件

    // mouseover

    // mouseout

    // 没有事件冒泡

    // mouseenter

    // mouseleave

     $("#btn").hover(function(){

         console.log("进入")

     },function(){

         console.log("离开")

     })

    // 6.模拟事件执行

    //每隔一秒会console.log一个1

     setInterval(() => {

         // 有事件冒泡

         $("#btn").trigger("click")

         // 没有事件冒泡

//         $("#btn").triggerHandler("click")

     }, 1000);

</script>

</html>

jq的事件对象

   点击按钮，会出现点击的这个事件的全部信息

 　　$("#btn").click(fn)

   　　 function fn(){

       　　 console.log(event) //MouseEvent {isTrusted: true, screenX: 30, screenY: 91, clientX: 30, clientY: 20, …}

    　　}

jQ的事件的更多相关文章

  1. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  2. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  3. JQ绑定事件的叠加和解决，index()方法的坑

    JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...

  4. jq的事件对象的属性

    1.event.type() 该方法的作用是可以获取到时间的类型 $('a').click(function(){ alert(event.type);//获取事件类型 return  false;/ ...

  5. jq的事件冒泡

    在页面上可以有多个事件,也可以多个元素响应同一件事, 事件冒泡引发的问题: 有些时候不想动用的事件,却因为事件冒泡而触发 解决问题: 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不 ...

  6. JQuery（二）---- JQ的事件与动画详解

    JQuery的事件 /** * 1.事件绑定的快捷方式: */ $("button:eq(0)").dblclick(function(){ alert("hahaah& ...

  7. 【JQ】jq动态绑定事件.on()、解绑事件off()

    #JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM ...

  8. jq绑定事件的4种方式

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...

  9. input file里的JQ change() 事件的只生效一次

    文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发onchange事件. 解决方法1:用jQuery的live代替直接使用change. 错误代码: $("#Upl ...

  10. JQ动画事件

    1.会飞的li html: <ul id="ulL"> <li>中国</li> <li>美国</li> <li&g ...

随机推荐

  1. vi/vim 命令

    vim 文件路径 编辑一个文件,英文模式, 按i:输入模式 按Esc:命令模式 输入模式 dd 删除一行 gg 跳到开头 shift+g 跳到结尾 U 撤销 shift+U 恢复撤销 命令模式 :wq ...

  2. Arduino开发ESP8266——安装与配置ESP8266开发板

    一.安装Arduino 1.下载安装包:点击打开 2.安装:直接点击下一步直至安装完成.如下图所示: 二.下载ESP8266开发板库: 在这面填写ESP8266开发板地址:http://arduino ...

  3. Django基础篇 04-模型类注册到后台Django Admin中

    一.django自带的admin的url地址 urls.py文件中 from django.contrib import admin from django.urls import path from ...

  4. 快速搭建基于webpack的babylon.js开发手脚架

    原文:https://doc.babylonjs.com/how_to/page2 目录 创建一个项目 安装Babylon.js 设置webpack 安装依赖 配置webpack 插件 创建场景 设置 ...

  5. 视觉里程计--视觉slam7.1/相机运动估计视觉算法

    视觉里程计 本篇文章记录了少许阅读<视觉slam14讲>的阅读整理,不是特别全面,只是为了本次项目中特定任务搜查资料,时间比较紧,文章并没有全面涵盖所有知识点.日后若时间有空闲,将回来补充 ...

  6. UCID数据集

    UCID数据集,做实验使用, 免费分享. 自取 链接:https://pan.baidu.com/s/1etMgXShdd_tJFHWbP3ipNw 提取码:62ww

  7. C# POST GET请求方式汇总

    /// <summary> /// POST方式提交 application/json /// </summary> /// <param name="post ...

  8. gulp技术：自动化构建工具

    作用:压缩css.js.img,合并文件,改名字,编译sass,拷贝 使用步骤: 1.安装node环境,下一步,下一步,安装C盘: 2.在你的根目录下,在地址栏输入cmd回车: 3.检测node和np ...

  9. PS将多个图片合并成长图

    1.将所有图片拖到ps里面排好序.这里图层需要倒序,合成长图上面的图片要在图层的下面.图层倒序的方法:图层→排列→反向. 2.设置画布大小.假设18张图片,每个图片的高度是1448像素,则设置画布的高 ...

  10. java获取当前类的绝对路径

    转自: http://blog.csdn.net/elina_1992/article/details/47419097   1.如何获得当前文件路径 常用: (1).Test.class.getRe ...