jQuery中的事件

1:加载dom

    在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中,

    通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

    $(document).ready(function(){});缩写$(function(){});

2: 事件绑定:对匹配的元素进行特定的事件绑定: bind()

3:合成事件:

        hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

        toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.

        toggle() 的另一个作用: 切换元素的可见状态.

4:事件冒泡

    事件会按照 DOM 层次结构像水泡一样不断向上只止顶端

    解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

5:事件对象的属性

    事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.

    event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

    //事件:例如鼠标移动  触发mousemove事件

    //如何得到事件对象:在响应函数中添加一个参数就可以,参数名无所谓,event

    //事件对象的两个属性:

    $(function()

    {

        $("body").mousemove(function(event)

        {

            $("#msg").text("x:"+event.pageX+" y:"+event.pageY);

        });

    });

6:移除事件

    移除某按钮上的所有  click 事件: $(“btn”).unbind(“click”)

    移除某按钮上的所有事件: $(“btn”).unbind();

    one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

        $("li").click(function()

                    {

                        alert(this.firstChild.nodeValue);

                        if("bj"==this.id)

                        {

                            $("#bj").unbind("click");

                        }

                    });

        

        //one();只为某一个元素添加一次事件,事件响应后不在被触发

            $("#rl").one("click",function()

                    {

                        alert("test");

                    });

时间: 2024-08-02 02:38:21

jQuery中的事件的相关文章

Jquery Mobile 中绑定事件

今天遇到了jmobile中绑定事件的问题, 参考:http://liyunpeng.iteye.com/blog/1964165 对页面中的绑定事件有了大概了解,不过这篇帖子年代久远,很多不是很详细,特此记录. 首先查到jmobile中的所有可以用.on()动态绑定的所有事件, 详情参考:http://www.runoob.com/jquerymobile/jquerymobile-ref-events.html 按以前的理解照抄,结果死活出不来效果,认真查看示例发现需要加"pageinit&q

【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>

JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获,以及DOM事件流.现在我们来看下,JQuery框架中的事件冒泡问题,以及如何阻止事件的传播行为. 1.JQuery中的事件绑定,都是属于事件冒泡. 这篇博客介绍了JQuery中绑定事件处理函数的几种方式,从中可以看到:这几种绑定方式,都不允许我们传递事件类型(是事件冒泡,还是事件捕获).而javascript原生提供的addEventListener()则允许我们设置事件的类型. <script> $(function(){

工作积累(六)——jQuery实现DOM元素事件绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式: <button class="dynamic-bind">按钮一</button> $(function() {   $('.dynamic-bind').on('click', function(e) {     alert(e.type); //'click' }); }); 那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素: $('.dynamic-bind:las

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都

锋利的jQuery ——jQuery中的事件和动画(四)

一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件,只要DOM就绪就会被执行.  window.onload则是所有内容加载完毕后才会触发. 2>多次使用 js的onload事件一次只能保存对一个函数的引用,他会自动用后面的函数覆盖前面的函数. 3>简写方式 $(document).ready(function(){ 编写代码})==$(funct

【学习笔记】jquery中的事件和动画

---恢复内容开始--- jquery中的事件 jquery用$(document).ready()方法来代替传统JavaScript的window.onload方法. window.onload方法在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后执行,通过 $(document).ready()方法注册的事件处理程序的DOM完全就绪时就可以被调用.此时,网页中的所有元素对jquery都是可以访问的. load()方法会在元素的onload事件中绑定一个处理函数,若绑定给windo