zoukankan      html  css  js  c++  java
  • 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鼠标相对于元素的坐标。

      })

  • 相关阅读:
    编程之美--2.13
    编程之美--2.17
    编程之美--3.8
    编程之美--3.7
    面试金典--9.3
    面试金典--9.2
    面试金典--9.1
    jq插件
    laravel controller
    laravel 登录验证
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/6429466.html
Copyright © 2011-2022 走看看