jQuery基础事件篇

一、事件

1.1、绑定事件

bind()://为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法
on()//在选择元素上绑定一个或多个事件的事件处理函数。
one()//附加一个事件，只运行一次，然后删除自己

1.2、解除事件

unbind()//bind()的反向操作，从每一个匹配的元素中删除绑定的事件。jQuery 3.0中已弃用此方法，请用 off()代替。
off()//在选择元素上移除一个或多个事件的事件处理函数

1.3、简单事件

blur()//当元素失去焦点时触发 blur 事件
change()//当元素的值发生改变时，会发生 change 事件
click()//触发点击事件
dbclick()//双击元素时，会发生 dblclick 事件
focus()//当元素获得焦点时，触发 focus 事件。
$(window).scroll()//当浏览器窗口滚动时，会发生 scroll 事件。
$(window).unload()//在当用户离开页面时，会发生 unload 事件。

1.4、复合事件
hover(fn1,fn2):鼠标移入，触发fn1;鼠标移出触发fn2

//例：
$("#div").hover(
        function(){
             $(this).css("background", '#bbffaa');
        }, 
        function(){
            $(this).css("background", 'red');
        });

二、事件对象

2.1、事件对象的获取

  在事件触发的函数中传递event参数

2.2、事件对象的常用属性

event.type 事件类型
event.target 触发事件的元素
//target:当前点击的标签
event.currentTarget 事件绑定在哪个元素上
//currentTarget:保存的是事件绑定的对象
event.pageX:相对于文档的左侧
event.pageY 相对于文档的顶部

2.3、事件的冒泡以及默认行为的处理

事件冒泡：点击某个节点后，如果该节点的父节点也有点击事件，则父节点的点击事件也会被触发

阻止冒泡：event.stopPropagation()

默认行为：一些标签在点击后会有自己的行为，如a标签点击后会自动跳转到指定的链接中

阻止默认行为触发:event.preventDefault()

三、高级事件

3.1、事件模拟操作(模拟用户触发了某个事件)

element.trigger("")
$(document).ready(function(){

 $('div').click(function(){
 alert('888888888');
 });
 //链式语法 很强势
 $('div').click(function(){
    alert('888888888');

}).click();

 //事件模拟 不通过用户触发事件 让事件自己触发起来
     $('div').trigger('click');
     $('div').triggerHandle('click');
 })

3.2、命名空间

给事件名添加一个新的名字，使用点分割。移除事件，可以通过新添加进去的名字来移除

$(function(){
 //命名空间：我们可以在事件名后给它添加一个新的名字，使用点分割。这样就通过后缀把相同事件添加的不同方法区分开，方便了事件管理
 $('div').on('click.tel',function(){
 alert('包小姐：138****8181');
 })
 $('div').on('click',function(){
 $(this).css("background","red");
 })
 $('div').off('click.tel');
 })

3.3、事件委托

事件自身不处理事件，把处理任务委托给父元素，甚至根元素(document)

/*$(document).ready(function(){
            $('ul').on("click",function(e){
                alert("触发该事件的是!!!"+e.target.textContent);
                alert("事件绑定在哪个元素上"+e.currentTarget.textContent);
            })
        })*/
//事件委托
$(document).ready(function(){
            $('ul').on("click","li",function(e){
                alert("触发该事件的是!!!"+e.target.textContent);
                alert("事件绑定在哪个元素上"+e.currentTarget.textContent);
            })；
        })

四、自定义事件编写

自己定义一个事件名，并给这个事件名添加一个函数。
最后使用element.trigger()来执行自定义的事件

$(function(){
 //自定义事件不指望引擎触发
 //链式语法不能执行
 //只能通过trigger/triggerHandler相关语法去调用
 $('div').on('helloworld',function(){
     alert('23');
 })
     $('div').triggerHandler('helloworld');
 })