jQuery事件绑定
<body>
<button></button>
<script>
/**jQuery中有两种事件绑定的方式
* 1、eventName(fn)
* 编码效率略高/部分事件jQuery没有实现,所以不能添加
* 2、on(eventName,fn)
* 编码效率略低/所有js事件都可以添加
注意点:两种方法都可以给元素添加多个相同或不同的事件,不会覆盖
* **/
$('button').click(function(){
alert('123');
})
$('button').on('click',function(){
alert('456');
})
</script>
</body>
jQuery事件解绑
$(‘DOM元素’).off()
**注意:**off()方法如果不传递参数,会移除所有的事件
$(‘DOM元素’).off(‘click’)
**注意:**如果传递一个参数,会移除所有指定类型的事件
$(‘DOM元素’).off(‘click’,fun)
**注意:**如果传递两个参数,会移除所有指定类型的指定事件
jQuery事件冒泡和默认行为
阻止事件冒泡的方法
方法一:在需要阻止冒泡的元素的事件处理函数中加入
return false;
$('.content').click(function(){
console.log('content');
return false;
})
方法二:调用event对象下的stopPropagation()方法
$('.box').click(function(eve){
console.log('box');
eve.stopPropagation();
})
阻止默认事件的方法
<body>
<a href="http://www.baidu.com">注册</a>
<script>
$('a').click(function(eve){
alert('注册界面');
//方法一
// return false;
//方法二
eve.preventDefault();
})
</script>
</body>
jQuery事件自动触发
自动触发事件的两种方法
方法一:$(‘DOM元素’).trigger(‘事件名’)
方法二:$(‘DOM元素’).triggerHandler(‘事件名’)
以上两种方法的区别:
1、如果利用trigger自动触发事件,会触发事件冒泡
如果用triggerHandler自动触发事件,不会触发事件冒泡
2、如果利用trigger自动触发事件,会触发默认行为
如果用triggerHandler自动触发事件,不会触发默认行为
jQuery自定义事件
想要自定义事件必须满足两个条件:
1、事件必须是通过 ‘on’ 绑定的
2、事件必须通过trigger来触发
<script>
$('div').on('myClick',function(){
console.log('123');
})
$('div').trigger('myClick');
</script>
jQuery事件命名空间
注意:
1、利用trigger触发子元素带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素没有命名空间的事件不会被触发
2、利用trigger触发子元素不带命名空间的事件,那么子元素和父元素所有相同类型的事件都会被触发
jQuery事件委托
什么是事件委托:子元素的事件由父元素代替执行
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
<button>点击添加一个li</button>
<script>
// $('li').on('click', function () {
// console.log($(this).html());
// })
//delegate() 事件委托方法
$('ul').delegate('li','click',function(){
console.log($(this).html());
})
$('button').click(function(){
$('ul').append('<li>我是新增的li</li>')
})
</script>
</body>
**注意:**在jQuery中如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
jQuery移入移除事件
1、移入:mouseover/移出:mouseout
子元素移入移出时会触发父元素的事件
$('div').mouseover(function(){});
$('div').mouseout(function(){});
2、移入:mouseenter/移出:mouseleave
子元素移入移出时不会触发父元素的事件(推荐使用)
$('div').mouseenter(function(){});
$('div').mouseleave(function(){});
3、hover:同时监听移入和移出事件
//鼠标移入时触发前一个function 移出时触发后一个function,也可以只传一个function,效果一样
$('div').hover(function(){},function(){});