javascript-jquery对象的事件处理

一、页面加载

1.页面加载顺序:先加载<head></head>之间的内容,然后加载<body></body>之间的内容

直接在head之间书写jquery代码,浏览器会立即执行脚本。但是由于页面元素在body部分才出现,此时尚未加载,所以jquery操作无法应用到页面元素上

解决方法:

将代码放到$(function(){

        代码代码;

      })

说明:$(function(){})函数等到页面加载完毕之后执行。相当于onload事件

2.onload事件和$(document).ready()区别

  1.window.onload:

    bunn个同时写多个window.onload,没法简化写法

  2.$(document).ready(function()):

    能同时多个编写,写多个时,全部执行:

    简化写法$(function(){});

二、绑定事件

1.bind()方法:

  语法:bind("事件名称 事件名称",处理函数());

2.事件移除:unbind()方法:

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

    $("#btn").unbind("mouseover");

  })

3.事件绑定one()方法:对于只需要触发一次,随后要立即移除绑定事件的情况,可以使用更为方便的one方法。

  $("p").one("click",function(){})

4.模拟触发:trigger()

  $("p").trigger("click");

5.triggerHandler与trigger的区别

  1.triggerHandler不会触发默认浏览器默认事件。比如:输入文本框获得焦点事件focus浏览器会自动带蓝色框。而triggerHandler不会触发浏览器默认的focus事件,只触发内置的focus事件

  2.triggerHandler只触发qjuery对象集合中第一个元素的事件处理函数。

  3.triggerHandler方法的返回的是事件处理函数的返回值

三、事件委派

  live();die();但是被废弃

  统一使用:

  on();off()

四、阻止默认行为的方法:

  $("a").click(function(event){

    event.preventDefault();

    $(this).next("span").text("阻止了a元素的默认行为");

五、阻止事件冒泡:stopPropagation()

  $("a").click(function(e){

    e.stopPropagation();

  })

  })

重要:阻止事件冒泡和默认行为的方法:在函数中书写:return false;

六、时间对象的发生位置和发生时间

  $("p").mousemove(function(event){

    $("p:eq(0)").text("移动鼠标相对页面的坐标"+event.pageX+","+event.pageY());//event.pageX和event.pageY鼠标相对于元素的坐标。

  })

原文地址:https://www.cnblogs.com/yaxinwang/p/6429466.html