深入学习jQuery事件对象

Posted 2020-08-12 小火柴的蓝色理想

[1]获取 [2]事件类型 [3]事件目标 [4]当前元素 [5]事件冒泡 [6]默认行为 [7]命名空间 [8]返回值 [9]键值

前面的话

　　在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持方式不同。jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各个浏览器下都可以正常运行而不需要进行浏览器类型判断，本文将详细介绍jQuery事件对象

 

获取

　　对于DOM事件对象来说，标准浏览器和IE8-浏览器的事件对象获取方式不一致。标准浏览器的事件对象是事件处理程序中的第一个参数，而IE8-浏览器的事件对象是直接使用event变量

　　jQuery采用了标准写法，并兼容低版本IE浏览器 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
$(\'#box\').click(function(event){
    $(this).html(event.type);
})
</script>

事件类型

　　事件有很多类型，事件对象中的type属性表示被触发的事件的类型

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
$(\'#box\').on(\'click mouseover mouseout\',function(event){
    $(this).html(event.type);
})
</script>

事件目标

　　事件目标target属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>    
<script>
$(\'#box\').on(\'mousemove\',function(event){
    $(event.target).css(\'background-color\',\'lightblue\');
})
$(\'#box\').on(\'mouseout\',function(event){
    $(event.target).css(\'background-color\',\'transparent\');
})
</script>

当前元素

　　currentTarget属性始终指向事件绑定的当前DOM元素，与this值始终相等

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>    
<script>
$(\'#box\').on(\'mousemove\',function(event){
    $(event.currentTarget).css(\'background-color\',\'lightblue\');
})
$(\'#box\').on(\'mouseout\',function(event){
    $(event.currentTarget).css(\'background-color\',\'transparent\');
})
</script>    

事件冒泡

　　DOM事件流分为三个阶段：事件捕获、处于目标和事件冒泡，由于IE8-浏览器不支持事件捕获。jQuery也不支持事件捕获

stopPropagation()

　　jQuery采用标准写法stopPropagation()来实现阻止事件冒泡

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">阻止冒泡</button>
<script>
$(\'#btn1\').on(\'click\',function(){
    alert(1);
});
$(document).on(\'click\',function(){
    alert(0);
});
$(\'#btn2\').on(\'click\',function(event){
    event.stopPropagation();
    $(\'#btn1\').on(\'click\',function(event){
        event.stopPropagation();
    });
});
</script>

isPropagationStopped()

　　event.isPropagationStopped()方法用来检测事件对象中是否调用过event.stopPropagation()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').click(function(event){
   alert(event.isPropagationStopped());//false
   event.stopPropagation();
   alert(event.isPropagationStopped());//true
});
</script>

stopImmediatePropagation()

　　stopImmediatePropagation()方法不仅可以取消事件的进一步冒泡，而且可以阻止同一个事件的其他监听函数被调用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$(\'#btn1\').on(\'click\',function(event){
    event.stopImmediatePropagation();
    alert(1);
});
$(\'#btn1\').on(\'click\',function(){
    alert(2);
});
$(\'#btn2\').on(\'click\',function(event){
    alert(1);
    event.stopPropagation();
});
$(\'#btn2\').on(\'click\',function(){
    alert(2);
});
$(document).on(\'click\',function(){
    alert(0);
});
</script>

isImmediatePropagationStopped()

　　isImmediatePropagationStopped()方法用来检测事件对象中是否调用过stopImmediatePropagation()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').click(function(event){
   alert(event.isImmediatePropagationStopped());//false
   event.stopImmediatePropagation();
   alert(event.isImmediatePropagationStopped());//true
});
</script>

默认行为

　　jQuery使用event.preventDefault()方法来阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').contextmenu(function(event){
   event.preventDefault();
});
</script>

isDefaultPrevented()

　　event.isDefaultPrevented()方法可以用来检测当前事件是否阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').contextmenu(function(event){
   alert(event.isDefaultPrevented());//false
   event.preventDefault();
   alert(event.isDefaultPrevented());//true
});
</script>

命名空间

　　event.namespace属性返回事件的命名空间

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').bind(\'test.abc\',function(event){
  alert(event.namespace);//abc
});
$(\'#box\').click(function(){
    $(\'#box\').trigger(\'test.abc\');
})
</script>

返回值

　　event.result是事件被触发的一个事件处理程序的最后返回值

　　[注意]当使用return false时，既可以阻止冒泡，也可以阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$(\'#box\').click(function(event){
  return 123;
});
$(\'#box\').click(function(event){
    $(\'#box\').html(event.result);
})
</script>

键值

　　鼠标事件中需要判断左键、右键还是滚轮。键盘事件中需要判断按下键盘的哪个按键

　　jQuery使用事件对象event.whitch属性来确定鼠标事件和键盘事件键值

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="box" style="height: 30px;width: 50px;background:lightblue">按钮</button>
<script>
$(\'#box\').on(\'keydown mousedown\',function(event){
  $(this).html(event.which);
});
</script>