JQuery学习23篇(事件对象)

最新推荐文章于 2021-03-15 11:25:00 发布
最新推荐文章于 2021-03-15 11:25:00 发布
阅读量166 收藏
点赞数
文章标签： jquery javascript js 事件对象 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czh500/article/details/103691803
版权

元旦将近，提前给大家拜个早年，祝大家在新的一年，事业学业有成，知识精进，财源广进！

大家可以把棋盘格子画的多一点，然后发挥想象力，稍作改造，做个贪吃蛇的小游戏出来。

以下是事件对象

function函数中的参数名可以随便取，我这里取名为e、ev、eve、even、event，该参数就代表事件对象，程序运行时，系统会把事件对象自动传给该参数，所以，该参数就代表事件对象。

$('#div1').click(function(e) {
	console.log('*******************');
	console.log(e.which, e.type, e.target, e);
	console.log('*******************');
});

$('#div1').click(function(ev) {
	console.log('-----------------------');
	console.log(ev.which, ev.type, ev.target, ev);
	console.log('-----------------------');
});

$(document).click(function(eve) {
	console.log('============================');
	console.log(eve, eve.which, eve.type, eve.target);
	console.log('============================');
});

$('#table1').click(function(even) {
	console.log('#########################');
	console.log(even, even.which, even.type, even.target);
	console.log('#########################');
});

$(document.body).click(function(event) {
	console.log('￥￥￥￥￥￥￥￥￥￥￥￥￥￥');
	console.log(event, event.which, event.type, event.target);
	console.log('￥￥￥￥￥￥￥￥￥￥￥￥￥￥');
});

以下是源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习23篇(事件对象)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
table {
	width: 500px;
	height: 500px;
	border-collapse: collapse;
}

td {
	border: 2px solid black;
}

.red {
background: red;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习23篇(事件对象)</h3>
	<div id="div1">点击我(江西省赣州市于都县)</div>
	<table id="table1">
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td class="red"></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	</table>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var table_node = document.getElementById('table1');
var tds = table_node.getElementsByTagName('td');
console.log(tds, tds.length);
var currentPos = 40;
var oldPos = 0;
//键盘的上下左右(38、40、37、39)
$(document).keydown(function(e){
	console.log(e, e.target, e.which, e.type);
	var down_key = e.which; //键盘哪个按键
	if(down_key == 38){ //按了上方向键
		tds[currentPos].className = '';
		oldPos = currentPos;
		currentPos -= 9;
		if(currentPos < 0){
			currentPos = oldPos;
			tds[currentPos].className = 'red';
		}else{
			tds[currentPos].className = 'red';
		}
	}else if(down_key == 40){ //按了下方向键
		tds[currentPos].className = '';
		oldPos = currentPos;
		currentPos += 9;
		if(currentPos > 80){
			currentPos = oldPos;
			tds[currentPos].className = 'red';
		}else{
			tds[currentPos].className = 'red';
		}
	}else if(down_key == 37){ //按了左方向键
		tds[currentPos].className = '';
		currentPos -= 1;
		if(currentPos < 0){
			tds[0].className = 'red';
			currentPos = 0;
		}else{
			tds[currentPos].className = 'red';
		}
	}else if(down_key == 39){ //按了右方向键
		tds[currentPos].className = '';
		currentPos += 1;
		if(currentPos > 80){
			tds[(tds.length - 1)].className = 'red';
			currentPos = tds.length - 1;
		}else{
			tds[currentPos].className = 'red';
		}
	}
	console.log('当前红色格子的索引=' + currentPos);
});


$('#div1').click(function(e) {
	console.log('*******************');
	console.log(e.which, e.type, e.target, e);
	console.log('*******************');
});

$('#div1').click(function(ev) {
	console.log('-----------------------');
	console.log(ev.which, ev.type, ev.target, ev);
	console.log('-----------------------');
});

$(document).click(function(eve) {
	console.log('============================');
	console.log(eve, eve.which, eve.type, eve.target);
	console.log('============================');
});

$('#table1').click(function(even) {
	console.log('#########################');
	console.log(even, even.which, even.type, even.target);
	console.log('#########################');
});

$(document.body).click(function(event) {
	console.log('￥￥￥￥￥￥￥￥￥￥￥￥￥￥');
	console.log(event, event.which, event.type, event.target);
	console.log('￥￥￥￥￥￥￥￥￥￥￥￥￥￥');
});
</script>
</html>

 

程宇寒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery中的事件对象
Kepler_II的博客
03-14 221
对于原生事件对象，由于浏览器的差异，开发者总是需要做兼容性的处理；为了解决这个问题，jquery封装了自己的事件对象，解决了原生事件对象的兼容性问题，还另外提供了很多新的属性和方法。 内容提纲： 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。 一．事件对象 事件对象就是 event 对象，通过处理函数默认
jQuery学习笔记之事件
老实青年的博客
04-09 261
事件对象     target  这个反应触发事件的DOM对象，可以在事件冒泡的时候判断是否是事件源头(compare event.target to this)获取绑定事件的DOM元素（触发元素），你点了那个就是那个     currentTarget：冒泡前的当前触发事件的DOM对象，获取监听元素的DOM，你绑定那个就是那个,等同于this     relatedTarget:对于鼠标事
JQuery 国际象棋棋盘 实现代码
10-29
前些时候为了熟悉国际象棋的各种开局，随手写了一个很简单的国际象棋棋盘（实在找不到现成的）。
JQuery实现简单的国际象棋棋盘
drclef的博客
03-15 7014
介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none }
jQuery制作《2048》
Hello_yihao的博客
12-01 1359
《2048》是比较流行的一款数字游戏，在初始的16个方格中会随机出现基础数字2和4，使用上下左右四个快捷键来移动数字块，相同的数字会叠加在一起，直到游戏出现[2048]数字即为游戏的通关。今天为大家奉上使用‘面向过程’写的《2048》小游戏。 游戏源码：2048游戏源码 1.构建页面 创建一个html文件用于编写静态页面，分别设置游戏的标题，开始游戏按钮，分数和16个小方格。 2.初始化
OPENCV标定图片+棋盘格图片+绘图程序
11-13
可以用于OPENCV相机标定的棋盘格图，包括两张大小不同的图片，以及绘图原码。可以根据自己的需求来生成自己要的图片。
jQuery事件对象的属性和方法详解
12-11
jQuery事件对象的属性和方法，供大家参考，具体内容如下 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标 通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 e
jQuery学习笔记 获取jQuery对象
01-21
使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector)[removed]以获取元素内部HTML代码是错误的，正确写法是$...
jQuery学习5 jQuery事件模型
12-10
4. **Event对象作为参数**：在jQuery事件处理程序中，`Event`实例通常作为参数传递，这样可以访问事件的相关信息，如事件类型、目标元素等。 5. **规范化Event实例属性**：jQuery对`Event`对象的常见属性进行了标准...
jQuery学习笔记 操作jQuery对象 CSS处理
12-09
CSS基本属性处理 方法 描述 css(name) ...获取元素上CSS规则中name属性值 ...设置元素上CSS规则name属性的值为value，也可使用函数参数，不解释；...这两个方法获取的是元素在页面中的实际高度宽度值，多用于数学
jQuery学习笔记 更改jQuery对象
12-04
在jQuery的学习过程中，掌握如何更改和操作jQuery对象是至关重要的。jQuery的核心设计理念之一就是通过简洁的API来简化DOM操作，其中链式操作是其一大特色。链式操作允许我们在一个对象上连续调用多个方法，而无需...
jQuery 事件--事件对象
前端
01-31 1541
事件对象Event 事件流 事件流指的是事件的发生顺序，包括三种： 事件的捕获阶段 事件的捕获是从上而下的，越高级的父级越早触发事件 处于的目标阶段 事件的冒泡阶段 让DOM树最底层的目标元素最先接收到事件，然后向上传递，是一个自下而上的过程 不支持冒泡的事件： blur:元素失去焦点时触发，不支持冒泡。 focus: 元素获得焦点时触发，不支持冒泡。 mouseenter:
JQuery中的事件对象详解
duoerbasilu
07-21 141
在js中，有window.event 来操作事件对象，但其不能跨浏览器，故Jquery对其进行了封装，jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement. 下面是jQuery事件对象可以在扩浏览器支持的属性: 属性名称 描述 举例 ...
jQuery事件对象
小破孩的博客
11-10 575
event：事件对象 event.currentTarget == 发生事件的DOM元素this的指向 event.data =  发生事件的时候传递过来的那个对象的值 event.isDefaultPrevented() 判断下阻止默认行为的事件是否发生过 event.isImmediatePropagationStopped() 判断下阻止捕获和冒泡的事件是否发生过
如何创建响应的jQuery图像网格效果
weixin_34383618的博客
01-25 82
今天我将使用css3的透明效果和Flexslider插件来创建一个响应的jquery网格效果，教程当中创建一个2行3列的2组幻灯片效果，你可以根据需要扩展成自己想要的行数和列数，这个教程使用了 Twitter Bootstrap引导框架来设计网格响应效果。当你查看例子的的时候调整浏览器窗口的大小，看看他是如何适应不同的浏览器宽度的。灯箱图像效果我使用 prettyPhoto 插件。 这些文章...
Opencv 棋盘定位（源码调试2）
星之河的专栏
01-18 9161
刚接触图像处理是从摄像机标定开始，一直好奇opencv程序中是怎么实现棋盘定位的。自己也曾用matlab写过摄像机标定的整个过程，在图像中检测出棋盘的位置是整个标定过程的第一步，但一直不稳定，不知道opencv中采用什么算法检测棋盘的位置。很可惜，网上基本上没有这方面的资料，在opencv原文件中的提示：The algorithms developed and implemented by Vez
JQuery 事件对象都有哪些常见属性？
jinlovo
05-07 672
$(function () { $(document).on("click", {"name":"jinlovo"},function (e) { console.log(e.data); //传递给事件处理程序的额外数据 Object{"name":"jinlovo"} console.l...
jQuery 事件对象
12-11 183
JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器 的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且 还创建了一些非常好用的属性和方法 一．事件对象 事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和方法，我们...
深入理解jQuery：事件与事件对象详解
“从零开始学习jQuery (3) - 事件与事件对象” 本文将深入探讨jQuery中的事件处理机制和事件对象，这对于理解jQuery的核心功能至关重要。事件是网页交互的基础，而jQuery通过简化JavaScript中的事件处理，使开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值