非常有用~~~

        //多事件绑定一

        $("ul").on('click',function(e){

           alert('触发的元素是内容是: ' + e.target.textContent)

        })

发现点击列表的圆点左侧会出现ul触发，为了防止ul触发，根据on的用法，加入选择器选项，改成如下，ul不再触发，只有li能够触发

        //多事件绑定一

        $("ul").on('click','li',function(e){

           alert('触发的元素是内容是: ' + e.target.textContent)

        })

jQuery事件对象的属性和方法

event.type：获取事件的类型

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

--可以确定元素在当前页面的坐标值

--鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离,简单来说是从页面左上角开始

--即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.currentTarget : 在事件冒泡过程中的当前DOM元素

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

卸载事件off()方法

• 通过.on()绑定的事件处理程序
• 通过.o ff() 方法移除该绑定

eg: 

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除两个事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件将全部销毁

$("elem").off()

on()的高级用法

委托机制

----提供了一个选择器

eg:

 //给body绑定一个click事件

    //没有直接给.aaron元素绑定点击事件

    //通过委托机制，点击.aaron元素的时候，事件触发

    $('body').on('click', '.aaron', function(e) {

      // alert(e.target.textContent)    

       alert($(this).text())

    })

///

第二参数并不是委托给它

例如老头子body开了个公司，如果没有第二参数，那全公司所有人都可以调用财务

如果有第二参数a，

当a是最底层员工时，即没有子元素，那么全公司只有a可以调用财务

当a是非底层员工时，即a有后代或子元素，那么全公司只要是a或a的后代都可以调用财务

冒泡是从内往外冒泡，a在最里面的时候只有a可以触发事件，a如果在中间，那么从最里面一直冒泡冒到a，这些后代都可以触发

this肯定是指dom树中触发事件的dom元素（不可能是集合）

在这里指的就是---.aaron和.aaron的后代的合集中触发事件的这个元素

这里给body绑定事件，on()函数里面的第二个参数是'.aaron'，就是委托给'.aaron'了，虽然绑定在了body上，

因为委托给'.aaron'了，所以点击'.aaron'或它的后代才能触发，

on()的多事件绑定

方法一：

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

方法二：

多个事件绑定同一个函数

 $("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

eg:

$("#test2").on('mousedown mouseup', function(e) {

        $(this).text('触发事件：' + e.type)

    })            ///    e.type--->type意思是事件类型，

////  $(this).text('触发事件：' + e.type) 就是要在text中显示当前触发的事件类型

方法三：

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

方法四：

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

jQuery键盘事件之keypress()事件

 跟keydown是非常相似

keypress事件与keydown和keyup的主要区别

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符

jQuery键盘事件之keydown()与keyup()事件

eg:

//监听键盘按键

    //获取输入的值

    $('.target1').keydown(function(e) {

        $("em:first").html(e.target.value)

    });

    //监听键盘按键

    //获取输入的值

    $('.target2').keyup(function(e) {

        $("em:last").text(e.target.value)

    });

//在.target2中每次键盘松手的那个按键是e

让最后一个em的text为每一个目标按键的value

在input元素上绑定keydown事件会发现一个问题：

每次获取的内容都是之前输入的，当前输入的获取不到

因为：

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本  /  而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

jQuery表单事件之submit事件

可以通过submit事件，监听下提交表单的这个动作

具体能触发submit事件的行为：

• <input type="submit">
• <input type="image">
• <button type="submit">
• 当某些表单元素获取焦点时，敲击Enter（回车键）

jQuery表单事件之select事件

 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select事件只能用于<input>元素与<textarea>元素

eg:触发元素的select事件    $(_input_).select(function(e){        alert(e.target.value)    })    $(_

jQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

change事件很简单，无非就是注意下触发的先后行为

jQuery表单事件之blur与focus事件

 表单处理事件focusin事件与focusout事件，

同样用于处理表单焦点的事件还有blur与focus事件

它们之间的本质区别:

是否支持冒泡处理

<div>
  <input type="text" />
</div>

其中input元素可以触发focus()事件

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。

focus()在元素本身产生，focusin()在元素包含的元素中产生

blur与focusout也亦是如此

jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

eg:给input元素增加一个边框        $(_input_first_).focusout(function() {             $(this).css('border','2px solid red')        })

jQuery鼠标事件之focusin事件

 当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件

eg: function fn(e) {

             $(this).val(e.data)

        }

        function a() {

            $("input:last").focusin('慕课网', fn)

        }

        a();

jQuery鼠标事件之hover事件

$(selector).hover(handlerIn, handlerOut)

• handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

• handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

eg:  $("p").hover(

        function() {

            $(this).css("background", 'red');

        },

        function() {

            $(this).css("background", '#bbffaa');

        }

    );

jQuery鼠标事件之mouseenter与mouseleave事件

三种参数传递方式与mouseover和mouseout是一模一样的

关键点就是：冒泡的方式处理问题

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>


这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

而 mouseenter事件

 mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发（上级）

jQuery鼠标事件之mouseover与mouseout事件

var n = 0;

        //绑定一个mouseover事件

        $(".aaron1 p:first").mouseover(function(e) {

            $(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))

        })

jQuery鼠标事件之mousemove事件

 监听用户移动的的操作

eg:

//绑定一个mousemove事件

    //触发后修改内容

    $(".aaron1").mousemove(function(e) {

        $(this).find('p:last').html('移动的X位置：' + e.pageX)  //移动时，鼠标相对于左边的位置

    })

event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。

jQuery鼠标事件之mousedown与mouseup事件

mousedown: 鼠标按下

mouseup:鼠标弹起

 方法一：$ele.mousedown()

方法二：$ele.mousedown( handler(eventObject) )

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

eg: $("button:eq(0)").mousedown(function(e) {

        alert('e.which: ' + e.which)

    })

• 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件

• 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件

jQuery鼠标事件之click与dbclick事件]

 方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

eg:

 $('p').click(function(){

            alert(this. textContent)

        })或

        $('p').click(function(e) {

            alert(e.target.textContent)

        })textContent 属性设置或者返回指定节点的文本内容----this是随时变化的，它指向的总是当前触发的事件，而e.target则是仅仅指向触发该事件的节点----e是元素，名字是可变的

        $("button:eq(1)").click(function() {

            $('p').click() //指定触发绑定的事件

        })

方法三：$ele.click( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

 //不同函数传递数据

        function data(e) {

            alert(e.date) //e.date指向的是下面的1111

        }

        function a() {

            $("button:eq(2)").click(1111,data)调用date函数

        }                                        //date接受 1111数据参数

        a();

trigger

触发事件函数，比如你点击了按钮B，B上绑着trigger按钮A的函数，那么按钮A的函数被触发

说一下我的理解：

trigger是自动执行，triggerHandle也是自动执行，这都知道了吧，

这一节让我们区分它们之间的区别，trigger自动执行是会有冒泡发生的，点击button:first时候trigger自动执行a的绑定事件click（就是点击<a>），trigger是会冒泡的！所以点击了<a>标签就点击了它所在的<div>，<div>有alert的事件就会发生，聚焦事件就不说了；

再说一下，triggerHandle，他不会发生冒泡，所以当点击button:last时候呢，就不会出现alert啦，就仅仅是点击了<a>标签和聚焦操作。

他们的作用呢，我觉得就是自动执行了，比如加载网页就要弹出什么一类的操作。

冒泡不是从子元素往父元素冒泡么 怎么给父元素绑定click 子元素有行为

冒泡不是从子元素往父元素冒泡么 怎么给父元素绑定click 子元素有行为

这结果不正是事件冒泡机制的最终目的么~当一个父元素下的多个子元素要表现出相同的效果的时候,利用冒泡机制给父元素绑定事件,以后你只要点击子元素,都会冒泡到父元素,从而利用父元素绑定的事件~这样就不用给每个子元素都去进行绑定,减少了代码冗余呀~~

this和e.target区别，求教

this指向的是监听事件的元素，e.target指向触发事件的元素， 事件可以由ul触发，也可以由li触发，所以e.target可能是ul，也可能是li； 但无论是ul触发还是li触发，都是由ul监听捕获的，所以this指向ul

e.target指向当前点击的DOM元素，点击哪个li就是哪个li,点击ul就是ul.因为js是会冒泡的，所以点击li的时候，this会变成ul.

关于冒泡问题

之前章节里提到的冒泡事件是：子元素如果绑定了某一事件（比如说mouseover），如果子元素出触发了mouseover事件，它会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件，那么父元素的mouseover也会被触发。也就是说父元素和子元素都绑定了相同事件才会出现冒泡现象。

但是这里的li元素并没有绑定任何事件，怎么往上冒泡呢？换句话说，绑定的是ul元素，为什么起作用的是li元素？

事件这个东西应该是称之为“监听”更为恰当。

当单击一个元素、或滑入滑出元素时，都会由该元素触发事件，然后一层一层向上冒泡，如果一直到body都没有遇到某元素去监听这个事件，那就没有任何反应，如果该元素有监听该单击事件，那就会知道这个事件，如果该元素的父代或祖代有添加监听事件，也会知道这个事件。

打个比喻，ABCDEF站成一排，A倒了一桶巧克力，从A流向F，

A用手沾了舔了舔，知道是甜的，A倒的

D用手沾了舔了舔，也知道是甜的，A倒的

这就是A和D监听了“倒一桶巧克力”这个事件

如果没有任何人舔，那这桶巧克力一样从A流向F

不存在绑定的说法，jquery只是处理触发的事件，事件本身就有，如果不捕获处理，事件会一直冒泡

这里只是在ul处理捕获的事件，任何文档对象如ul，li都可以触发事件，只是在于是否捕获处理

textContent,,,为什么我不能用text()得到里里面的内容

因为textContent是Dom对象，text()是jQuery方法

可以使用$(e.target).text()

on绑定click事件和直接给元素绑定click事件有什么区别？

直接绑定一次只能对应一个事件和一个函数；如果用on绑定，一次可以进行多种事件的绑定，以及多种函数的选用

click()只对页面已经存在的元素起作用，动态生成的元素需要用到on，比如页面中存在一个button，<button id='btn1' type='button'>btn1</button>，$('#btn1').click(....)是可以成功触发的，但如果动态创建一个新的button比如这样：$('#btn1').after("<button id='btn2' type='button'>btn2</button>")，调用$('#btn2').click时是不起作用的，on('click','#btn2',function())则可以正常触发。

按下的一瞬间时 文字还没有输入到文本框所以第一次下边获取不到这个值。简单点说文字输入进去文本框这个行为要慢于keydown事件。

e.target.value这句代码怎么理解？

e.target表示该DOM元素，然后在获取其相应的属性值。

回车键或者点击提交表单   会跳转页面   action="test.html"

回车键或者点击提交表单,禁止浏览器默认跳转  action="destination.html"    

target是当前事件执行的第一个具体DOM对象，这个DOM对象不变

this是事件冒泡到DOM树的哪个对象，this就指向哪个对象，改变的

function中的参数e是怎么来的

e是event（事件）的意思，e.target就是事件的对象