$('input').on('focus',function (event) {
console.log(event);
});
基本和 webAPI 里面的 事件对象一致
$('input').on('focus',function (event) {
console.log(event);
});
基本和 webAPI 里面的 事件对象一致
一 事件注册
二 事件处理
//2 事件处理 on() 绑定事件
$("div").on({
click:function () {
$(this).css('background','red');
},//绑定事件1
mouseenter:function () {
$(this).css('background','pink');
},//绑定事件2
onmouseleave:function () {
$(this).css('background','green');
}//绑定事件3
});
三 事件对象
知识梳理
//1 单个注册事件 element.click(function(){}); //2 事件绑定 element.on({可以绑定多个事件}); //3 解绑事件 element.off(); //4 自动触发事件 element.trigger();
一 绑定事件 on()
优势
//1 可以绑定多个事件 //2 可以事件委托 //3 可以给 未来动态创建的元素绑定事件
1）语法
element.on(events,[selector],fn); //1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。 //2. selector: 元素的子元素选择器 。 //3. fn:回调函数 即绑定在元素身上的侦听函数。
2）绑定多个事件
//1 绑定多个事件处理程序 $("div").on({ click:function () { $(this).css('background','red'); },//绑定事件1 mouseenter:function () { $(this).css('background','pink'); },//绑定事件2 onmouseleave:function () { $(this).css('background','green'); }//绑定事件3 }); //2 多个事件处理程序相同 $("div").on('mouseenter mouseleave', function () { $(this).toggleClass('current'); }); //鼠标经过加上current 鼠标离开去掉current
3）事件委托
//事件委托 $('ul').on('click',('li'),function () { alert('事件委托'); }); //ul 是事件绑定对象 li是事件触发对象
4）可以给 未来动态创建的元素绑定事件
//1 单独注册事件 不能给未来创建的元素 绑定事件 $('ul li').click(function () { alert('10'); }); var li = $('<li>我是后创建的</li>'); $('ul').append(li);//这个li 没有点击事件 //2 on() 可以给 未来动态创建的元素 的绑定事件 $('ul').on('click','li',function () { alert(10); }); var li = $('<li>我是后创建的</li>'); $('ul').append(li);
小案例 微博发布
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } .box { 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { 450px; height: 160px; outline: none; resize: none; } ul { 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; display: none; } input { float: right; } ul li a { float: right; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" class="txt" cols="30" rows="10"></textarea> <button class="btn">发布</button> <ul> </ul> </div> <script> //1 点击发布按钮 动态创建小li 把文本框的值和删除按钮放入小li中 并把li插入到ul中 $(".btn").on('click',function () { var li = $("<li></li>"); li.html($('.txt').val() + "<a href='javascript:;'>删除</a>");//把文本框的值赋值给li $("ul").prepend(li); li.slideDown();//过渡效果 和 css中的 display: none; 配合使用 让元素滑动出来 $(".txt").val("");//清空输入框 }); //2 点击删除 删除留言本身 // $('ul a').click(function () { //普通方法 不能给动态生成的元素 添加事件 [这个案例的练习重点] // $(this).parent().remove(); // }); //on() 可以给动态生成的元素 绑定事件 $('ul').on('click','a',function () { $(this).parent().slideUp(function () { $(this).remove();//这里的this 是 li 不是a }); }); </script> </body> </html>
二 解绑事件 off()
$('div').off();//1 移除所有事件
$('div').off('click');//2 移除其中一个事件
$('div').off('click mouseenter');//3 移除多个事件 中间用空格分隔
$('ul').off('click','li');//4 解除事件委托 // 如果事件只想触发一次 用 one()来绑定
就不存在绑定后再解绑这样的操作了
三 自动触发事件 trigger()
$('div').click(); //1 元素.事件 $('div').trigger('click'); //2 元素.trigger('事件名称') $('div').triggerHandler('click'); //3 元素.triggerHandler() 不会触发元素的默认行为
代码范例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动触发</title> <script src="jquery.min.js"></script> </head> <body> <input type="text"> <script> //给input添加 焦点事件 $('input').on('focus',function () { $(this).val('你好'); }); //自动触发 但是阻止了默认行为 没有光标闪烁 $('input').triggerHandler('focus'); </script> </body> </html>