jQuery的事件1——on，one
生活随笔
收集整理的這篇文章主要介紹了
jQuery的事件1——on，one
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
.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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery——clone()方法
- 下一篇： jQuery事件2——off取消事件绑定