jQ的事件
<!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的事件的更多相关文章
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...
- JQ绑定事件的叠加和解决，index()方法的坑
JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...
- jq的事件对象的属性
1.event.type() 该方法的作用是可以获取到时间的类型 $('a').click(function(){ alert(event.type);//获取事件类型 return false;/ ...
- jq的事件冒泡
在页面上可以有多个事件,也可以多个元素响应同一件事, 事件冒泡引发的问题: 有些时候不想动用的事件,却因为事件冒泡而触发 解决问题: 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不 ...
- JQuery（二）---- JQ的事件与动画详解
JQuery的事件 /** * 1.事件绑定的快捷方式: */ $("button:eq(0)").dblclick(function(){ alert("hahaah& ...
- 【JQ】jq动态绑定事件.on()、解绑事件off()
#JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM ...
- jq绑定事件的4种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...
- input file里的JQ change() 事件的只生效一次
文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发onchange事件. 解决方法1:用jQuery的live代替直接使用change. 错误代码: $("#Upl ...
- JQ动画事件
1.会飞的li html: <ul id="ulL"> <li>中国</li> <li>美国</li> <li&g ...
随机推荐
- C++ PTA 小于m的最大的10个素数
7-5 小于m的最大的10个素数 (15分) 给定一个整数m(50<m<20000),找出小于m的最大的10个素数. 输入格式: 输入在一行中给出一个正整数m(50<m<200 ...
- CF 1020B Badge
之前写过DFS的题,但是或多或少有参考别人的思路,最近开始专攻DFS,下面这道题就是DFS练习第一题CF 1020B,之后训练完后抽时间写一篇DFS专项. B. Badge time limit ...
- 安装win10:我们无法创建新的分区，也无法定位现有分区
操作环境:win10企业版ISO,U盘安装,UEFI启动 解决思路:win10 UEFI 安装需要硬盘在GPT模式,如果直接创建分区默认的是MBR,所以将磁盘转换成GPT,再分配一个EFI空白分区,就 ...
- 用javassist和CGLIB 解决JDK动态代理的缺陷
用 javassist 解决 JDK 动态代理的缺陷 JDK动态代理的缺陷 要求目标类必须实现接口,否则产生不了代理.有些场景下,目标类也要产生代理类但是木有实现接口,这个时间 Java 中有两个常 ...
- java获取类内容
java获取类内容 Book类 public class Book implements Serializable { private int id; private String name; pri ...
- windows系统，自动设置--shutdown命令了解
参考:https://baike.baidu.com/item/shutdown/10469108?fr=aladdin 比如你的电脑要在24:00关机,可以选择"开始运行",输入 ...
- Ubuntu 22.04 安装 VMWare 16.2.3 后无法启动
异常日志: 2022-06-13T03:49:56.019Z In(05) host-29676 In file included from /tmp/modconfig-XR2GVI/vmmon-o ...
- mysql创建函数时提示1418。可选关闭二进制日志或者设置log_bin_trust_function_creators=1
报错详情如下:1418--This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration a ...
- Java基础学习——Arrays类
1.数组复制 Arrays.copyOfRange(original, from, to) 此方法与System.arraycopy类似. 不同的是System.arraycopy需要提前声明目标数组 ...
- windows音频设备图像隔离audiodg.exe占用内存高（停止与重启audiodg服务）
首先想到的办法是结束该进程,于是在任务管理器里结束进程后,内存是释放了,但是发现发现电脑没有声音去到电脑的system32目录下双击audiodg.exe后任然没有声音解决方法如下(重启audiodg ...