jQuery的事件1—

.on()

作用：在选定的元素上绑定一个或多个事件处理函数

可传4个参数：event selector data handle

【注】当一个事件被触发时，要传递给事件处理函数的event.data.

【例1】在每个小方块上同时绑定点击事件，鼠标移入事件和鼠标移出事件，效果如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style: none;}li {width: 50px;height: 50px;line-height: 50px;text-align: center;background-color: cadetblue;float: left;margin-right: 5px;color: #fff;}.active {width: 55px;height: 55px;line-height: 55px;border-radius: 20px;}.color {background-color: #424242;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
<script src="./jquery.js"></script>
<script>$('li').on({click: function () {if ($(this).hasClass('color')) {$(this).removeClass('color')}else {$(this).addClass('color')}},mouseenter: function () {$(this).addClass('active');},mouseleave: function () {$(this).removeClass('active');}})
</script>
</html>

【例2】传event selector handle

js代码

$('ul').on('click', 'li', function (e) {$(this).addClass('active');console.log($(e.target).text());})

效果

【例3】传event data handle

$('ul').on('click', true, function (e) {console.log(e.data);
})

效果

.one()

作用：为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。

【例】将例1的事件on换为one

效果

jQuery的事件1——on，one相关推荐

js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
jquery的事件对象
jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装. screenX和screenY 对应屏幕最左上角的值 clientX和clientY 距离页面左上角的位置(忽略滚动条) ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
Java程序员从笨鸟到菜鸟之（九十）跟我学jquery（六）jquery中事件详解
由于jQuery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点. 在传统的JavaScript中,注册一个事件也是非常 ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
jquery键盘事件全记录
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
jquery 回车事件
为什么80%的码农都做不了架构师?>>> jquery 回车事件简单地记下jquery实现回车事件,代码如下: 全局: $(function(){ document.onke ...
jQuery 双击事件（dblclick）时，不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那 ...
jquery css事件编程尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

jQuery的事件1——on，one

.on()

.one()

jQuery的事件1——on，one相关推荐

最新文章

热门文章