jQuery 学习笔记 事件介绍

jQuery本部分文档大部分是对events概念的介绍，本文提取个人认为重要的记录下来

监听事件的方式

1. javascript的方式
   

   <button onclick="alert('Hello')">Say hello</button>

   这种方式没有实现js和html代码的分离，可维护性差

2. addEventListener方式

   <button id="helloBtn">Say hello</button>  //在html中

   // js中
   var helloBtn = document.getElementById( "helloBtn" );
    
   helloBtn.addEventListener( "click", function( event ) {
       alert( "Hello." );
   }, false );

   这种方式使用addEventListener的方式来实现html和js的分离，但是并不是所有的浏览器都支持这种方法，如IE9以前的版本（attachEvent）

3. jQuery convenience method

   // Event binding using a convenience method
   $( "#helloBtn" ).click(function( event ) {
       alert( "Hello." );
   });

还有很多jQuery的方式来监听事件，这里也不一一介绍了，主要介绍一种方法，其他方法事件基础中已经介绍

$( "#helloBtn" ).bind( "click", function( event ) {
    alert( "Hello." );
});

事件对象

这里主要介绍一个事件委派的例子，详细的介绍请见后文

// Preventing a default action from occurring and stopping the event bubbling
$( "form" ).on( "submit", function( event ) {
 
    // Prevent the form's default submission.
    event.preventDefault();
 
    // Prevent event from bubbling up DOM tree, prohibiting delegation
    event.stopPropagation();
 
    // Make an AJAX request to submit the form data
 
});  

event.preventDefault() 用来阻止事件的默认行为，在这里是执行form中的action
event.stopPropagation() 用来阻止事件传播，这样form的父元素就不会得到事件触发的通知

还有一个重要的事件属性：originalEvent用来获得原始的事件，对调试代码是很有用的。

处理事件和事件函数在事件基础那一章中已经介绍。