所有事件event集锦

news/2024/7/10 2:27:51

'mousedown touchstart', 'mousemove touchmove', 'mouseup mouseleave touchend touchleave touchcancel', 'wheel mousewheel DOMMouseScroll',

ondragstart 事件 dragmove事件  dragend事件 ondrop 事件

 

    • 在拖动目标上触发事件 (源元素):
      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发

 

    • 释放目标时触发的事件:
      • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

 

 

ondragstart 事件在用户开始拖动元素或选择的文本时触发。

拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。

 

 

当双击按钮时,隐藏或显示元素:

dblclick事件,双击事件

$("button").dblclick(function(){
  $("p").slideToggle();
});

表单事件(input+propertychange就可以实时触发了)

1. onchange事件与onpropertychange事件的区别:

  onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有。

2. oninput事件与onpropertychange事件的区别:

  oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触发;onpropertychange事件是任何属性改变都会触发,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方法与一般事件相同。

3. oninput与onpropertychange失效的情况:

oninput事件:

  (1)当脚本中改变value时,不会触发;

  (2)从浏览器的自动下拉提示中选取时,不会触发;

onpropertychange事件:

  当input设置为disable=true后,不会触发。

转载于:https://www.cnblogs.com/chaoyuehedy/p/5656829.html


http://www.niftyadmin.cn/n/4827479.html

相关文章

JS 事件 轮播图 0402

1. tab切换 <style>*{margin: 0;padding:0;}ul,ol,li{list-style: none;}.cont{width: 800px;height: 600px;border: 5px solid #333;margin: 0 auto;display: flex;flex-direction: column;}.cont ul{width: 100%;height: 60px;display: flex;}.cont ul li{flex:1;font…

[改善Java代码]推荐在复杂字符串操作中使用正则表达式

一、分析 字符串的操作&#xff0c;诸如追加、合并、替换、倒序、分隔等&#xff0c;都是在编码过程中经常用到的&#xff0c;而且Java也提供了append、replace、reverse、split等方法来完成这些操作&#xff0c;它们使用起来确实方便&#xff0c;但是更多的时候&#xff0c;需…

Python3的time模块的使用

import time# 1.time() print( python诞生总时间&#xff08;1970&#xff09;&#xff1a;, time.time())# 2.asctime() print(当前时间&#xff1a;, time.asctime()) # 当前时间# 3.ctime() print(当前时间&#xff1a;, time.ctime())# 4.gmtime() print(接收时间戳(格林威…

JS 动画

纵向展开 <style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background: rgb(9, 175, 9);position: fixed;top: 100px;left: 0px;overflow: hidden;} button{height: 30px;width: 50px;margin: 30px;}</style> </head> <body><butt…

JS 运动函数 轮播图

1. 复制标签的语法 <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>// 复制标签的方式// clone 方式var ul document.querySelector(ul);// 获取标签var li1 document…

Python3的re模块的使用

import re# 2元字符 . ^ $ * ? { } [ ] | ( ) \ # 作用&#xff1a;匹配字符串s hello world # 返回开始位置 下标 print(s.find(llo))# 找到 并替换 print(s.replace(ll, xx))# . 代指一位字符&#xff0c;代指所有字符 除了换行符 \n ci re.findall(w\w{2}l, hello world…

如何在Linux下环境下快速切换工作目录

为什么80%的码农都做不了架构师&#xff1f;>>> 在Linux命令行下&#xff0c;我们经常需要在一个目录下执行某些操作在跳转到另外的目录下&#xff0c;也就是使用我们熟悉的cd命令&#xff0c;基本上接触过命令行的人&#xff0c;第一个认识的命令都是cd&#xff0…

JS 节点 正则表达式

1. 节点操作 基本概念 复制标签,会使用克隆方法 写入标签时,会使用节点操作方法 什么是节点? 整个的HTML文件,其中的所有内容,都视为HTML文件的一个节点对象 可以通过操作这些节点对象,来操作HTML文件 DOM节点:DOM 就是我们 html 结构中一个一个的节点构成的 不光我们的标签…