您的位置:首页 > Web前端 > JQuery

jquery中关于事件绑定的问题

2017-12-28 14:57 309 查看
jquery中的事件绑定方法:
1.将事件绑定到document上,当整个dom中发生点击事件时会先判断当前点击的对象是否匹配该className,再执行点击的回调方法。适用于多组重复元素的点击事件。
$(document).on('click','.className',function(){});2.将事件绑定到该className的元素上,一旦该元素发生点击事件立即执行回调方法。如果是单独的元素点击事件,用此种绑定方法更为高效。缺点是只在页面加载的时候绑定一次,无法获取后加载在页面上的元素。$('.className').on('click',function(){});举例:
导航栏的切换动作
$(document).on("click","ul li",function(){
$(this).addClass("changeBgColor").siblings().removeClass("changeBgColor")
});由于导航菜单(li)并不是写死在页面上,而是由数据库读取,并循环显示在页面上,此时用第二种绑定方法无法获取“li”,因此要用第一种绑定方式,且此时不需要判断是哪一个”li“发生了点击事件,因为$(ducoment).on()方法会自动判断是哪一个。注:若”li“元素是写死在页面上的,则可以使用第二种绑定方式,这里需要用$(this).index()方法来判断是哪一个li发生点击事件,而上面一种方法则不需要手动进行判断。如下:
$(‘ul li’).on(“click”,function(){
$(‘ul li’).eq($(this).index()).addClass(“changeBgColor”).siblings().removeClass(“changeBgColor”)
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 事件绑定