• jQuery基础教程之事件


    1、$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。在浏览器进行下载过程中,只要DOM完全就绪,就可以使用,不必等待整个页面下载完成后,再进行相关的操作。其次,在使用JavaScript对页面进行操作时,不用考虑页面加载的次序。再者,同过ready()机制能够很好的实现一个页面执行多个脚本

    简写:$(document).ready(function(){ ...//代码... })

            $().ready(function(){ ...//代码... })

            $(function(){ ...//代码... })

    推荐使用较长的形式,因为较长的形式能够更清楚的表达代码在做什么。

    PS:jQuery能够很好的与其他库实现共存,当然要使用的是一个.noConflict()的方法。$==jQuery

    2、简单事件

    渐进增强原则:如果浏览器不支持JavaScript,则将其功能隐藏起来,最好的是,能够在当前页面的替代版本而仍然起到应有的作用。

    bind()方法:指定任何JavaScript事件,并为该事件添加一种行为。

    简写事件方法:鉴于为某个事件(例如简单的单击事件)绑定处理程序极为常用,jQuery提供了一种简化事件操作的方式。

    jQuery为标准的DOM事件提供了响应的简写事件方法:

    blur\mousedown\change\mousemove\click\mouseout\dblclick\mouseover\error\mouseup\focus\resize\keydown\scroll\keypress\select\keyup\submit\load\unload

    这些简写的方法,能够把一个事件处理程序绑定到同名事件上。

    3、复合事件

    .ready()  

    .toggle() 用户鼠标点击某个元素时,改变元素外观。优点:交替执行两种或更多种不同的操作语言,.toggle()的适用性更强

    .hover() 用户鼠标指针悬停在某个元素上时,影响元素的外观。优点:解决跨浏览器的版本兼容问题;很好的解决了事件的冒泡处理问题。

    4、事件旅程

    事件捕获:从祖先元素一层层下次搜索,直至找到具体的元素。

    事件冒泡:首先发送给最具体的元素,在这个元素获得响应机会之后,事件向上冒泡到更一般的元素。

    他俩的共同之处是允许多个元素响应单击事件。

    在执行过程中,首先,事件从一般元素到具体元素逐层捕获,然后,事件在通过冒泡返回DOM树顶层。而时间处理程序可以注册到这个过程中的任何一个阶段。

    jQuery始终会在模型的冒泡阶段注册事件处理程序,因此,最具体的元素会首先获得响应事件的机会。在这样的过程中,就像打开了,潘多拉魔盒。

    jQuery隐式迭代能力:一次隐藏所有按钮,而不需要使用包转元素。

    5、通过事件对象改变事件的旅程

    $(document).ready(function(){
    $('#switcher').click(function(){
    $('#switcher .button').toggleClass('hidden');
    });
    $('#switcher .button').bind('click',function(){
    $('body').removeClass();
    if(this.id == 'switcher-large'){
    $('body').addClass('large')
    }
    else if(this.id == 'switcher-narrow'){
    $('body').addClass('narrow')
    }
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected')
    });
    });

    事件对象:事件对象时一种JavaScript结构,它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息,也提供了可以用来影响事件在DOM中传递进程的一些方法。为了在处理程序汇总使用事件对象,需要为函数添加一个参数:event。

    事件处理程序中的变量event保存着事件对象,而event.target属性保存着发生事件的目标元素。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接受到事件的元素。

    pe:

    $(document).ready(function(){
    $('#switcher').click(function(event){
    $('#switcher .button').toggleClass('hidden');
    });});

    event.target的真正作用,是将事件的对象和html里面的元素真实的对应起来。click这样一个事件,如果不适用event.target来进行标记,那么,js文件无法识别这个事件,究竟是谁发起的。默认情况下,它将所有由click触发的响应全部由最具体的元素一直向外延伸。

    event.target使得click有了明确的对象指向

    停止事件传播

    .stopPropagation()可以完全阻止事件冒泡。虽然存在跨浏览器环境中无法安全的使用,只要保证jQuery来注册所有的事件处理程序。

    $('#switcher .button').click(function(event){ ..../code/....  event.stopPropagation();})

    事件委托

    事件委托是利用冒泡的一向高级技术,通过事件委托,可以借助一个元素上的事件的事件处理程序完成很多工作。

    is()这个方法用于接收一个选择符表达是,然后用选择符来测试当前的jQuery对象。如果集合中至少有一个元素与选择符匹配,is()返回true。

  • 相关阅读:
    设计模式:生产者消费者模式
    图解SSH原理
    监听Google Player下载并获取包名等信息
    android targetSdkVersion>=26收不到广播的处理
    ant property file刷新不及时
    maven的pom文件报错: must be "pom" but is "jar"
    AJAX其实就是一个异步网络请求
    String、StringBuffer、StringBuilder的区别
    Properties、ResourceBundle
    JavaWeb--Listener
  • 原文地址:https://www.cnblogs.com/thinkabout/p/3207572.html
Copyright © 2020-2023  润新知