jQuery中的事件相关操作

最新推荐文章于 2024-05-06 10:59:29 发布

寻梦人12138

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量365

点赞数 8

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_44212870/article/details/136757214

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery事件

鼠标

- click

- - 单击事件

- dblclick

- - 双击事件

- mouseover/mouseenter

- - 鼠标进入元素

- mouseout/mouseleave

- - 鼠标离开元素

- mousedown

- - 鼠标被按下

- mouseup

- - 鼠标松开

- mousemove

- - 鼠标在元素上面移动

- hover([fnOver,]fnOut)

- - fnOver

- - - 鼠标移到元素上触发的事件

- - fnOut

- - - 鼠标移出触发的事件

$(
  function(){
    $("#main").on('click mousemove',function(event){
      if(event.type === 'click'){
        alert("被单击")
      }
      if(event.type === 'mousemove'){
        alert("鼠标移动")
      }
    })
  }
)

事件绑定

on()

- $(selector).on(types,childSelector,data,handleFunction)

- - types

- - - 必须，添加事件的类型，可以添加多个事件
    - 如 'click'

- - childSelector

- - - 可选，子选择器，用于为未来的元素绑定事件

- - data

- - - 可选，用于传递到时间函数的额外数据

- - handlerFunction

- - - 可选，触发事件的回调函数

<script>
  $(
    function(){
      $("#btn").on('click',function(){
        alert("按钮被按下");
      })
    }
  )
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.7.1.js"></script>
		<script>
			$(
				function(){
					$("#btn").on('click',function(){
						$("#ul").append("<li>101112</li>")
					})
					//添加事件
					$("#btn2").on('click',function(){
						$("#ul").on('click',$('li'),function(){
							alert(111)
						})
					})
				}
			)
		</script>
	</head>
	<body>
		<ul id="ul">
			<li>123</li>
			<li>456</li>
			<li>789</li>
		</ul>
		<input id="btn" type="button" value="添加li标签"/>
		<input id="btn2" type="button" value="添加click事件"/>
	</body>
</html>

bind(type,[data,]fn)

- type 事件类型
- data 要传输的数据
- fn 回调函数
- 不能为未来元素绑定事件

事件解绑

off(types,childSelector) 用于接触某个使用on()绑定的事件元素对象

- types

- - 可选，规定要从被选元素移出的一个或多个事件或命名空间

- childSelector

- - 可选，指定对某个子元素进行解绑

$(
  function(){
    $("#btn").on('click',function(){
      console.log("off");
      $("#main").off('click mousemove');
    })
  }
)

unbind(typeObject)

- typeObject 事件类型

事件触发

trigger('eventObject')

- 相当于触发了指定功能

triggerHandler('eventObject')

- 触发指定元素事件但不触发默认功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.7.1.js"></script>
		<script>
			$(
				function(){
					$("#submit").on("click",function(){
						alert("提交按钮被点击")
					})
					$("#btn").on('click',function(){
						$("#submit").trigger("click")
					})
					$("#btn2").on('click',function(){
						$("#submit").triggerHandler("click")
					})
				}
			)
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="触发提交按钮事件">
		<input id="btn2" type="button" value="触发提交按钮事件但不触发默认行为">
		<form action="xxx" method="post">
			<input id="submit" type="submit" value="提交">
		</form>
	</body>
</html>

event事件对象

event属性

- 鼠标事件

- - altKey

- - - 事件触发时是否按下了alt键

- - ctrlKey

- - - 事件触发时是否按下了ctrl键

- - shiftKey

- - - 事件触发时是否按下了shift键

- - button

- - - 事件触发时按的是鼠标的哪个键

- - clientX

- - - 设置或获取鼠标指针相对于窗口客户区域的X坐标，其中客户区域不包括窗口自身的空间和滚动条

- - clientY

- - - 设置或获取鼠标指针相对于窗口客户区域的Y坐标，其中客户区域不包括窗口自身的空间和滚动条

- 键盘事件

- - keyCode

- - - 得到被按下键的ASCESC编码

- 任意事件

- - type

- - - 返回当前触发事件的名称

- - target

- - - 返回最初触发事件的DOM元素，即事件触发源

- - currentTarget

- - - 事件冒泡阶段当前的DOM元素，即当前事件源

- - data

- - - 当前执行的处理器被绑定的时候，包含的数据传递（新增）

event方法

- stopPropagation()

- - 阻止事件冒泡

- preventDefault()

- - 阻止事件默认动作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.7.1.js"></script>
		<script>
			$(
				function(){
					$("#main").on('click',function(){
						alert("div被点击")
					})
					$("#link").on('click',function(){
						alert('超链接被点击')
					})
					//阻止事件冒泡
					$("#main2").on('click', function () {
						alert("div被点击")
					})
					$("#link2").on('click', function (event) {
						//阻止事件冒泡
						event.stopPropagation()
						alert('超链接被点击')
					})
					//阻止默认事件
					$("#link3").on('click',function(event){
						//阻止默认事件
						event.preventDefault()
						alert("被点击")
					})

				}
			)
		</script>
	</head>
	<body>
		<div id="main" style="width: 100px;height: 100px; background-color: aqua;">
			<a id="link" href="#">超链接</a>
		</div>
		<div id="main2" style="width: 100px;height: 100px; background-color: aqua;">
			<a id="link2" href="#">超链接</a>
		</div>
		<a id="link3" href="www.baidu.com">超链接</a>
	</body>
</html>